html4视频测试方法,3.4 处理视频 - HTML5 Canvas 实战
虽然HTML5的画布API没有提供直接在画布上绘制视频的方法,但是我们一定可以处理视频,其方法是从隐藏的video标签中捕获视频的帧,再使用循环把它们拷贝到画布上。
图3-5 处理视频
准备工作
开始之前,让我们谈一谈每个浏览器所支持的HTML5视频格式。在本书写作之时,关于视频格式的战争还在如火如荼的进行着,所有的主流浏览器,如Chome, Firefox, Opera, Safari, and IE,还在增加或者减少对不同视频格式的支持。更糟糕的是,每当某个主流浏览器增加或者减少对某一视频格式的支持,为了让应用程序能够支持所有的浏览器,开发人员就不得不再一次规划其所支持的最小视频格式集。
在本书写作之时,三大主流视频格式是Ogg Theora, H.264, 和WebM。本章讲述视频的几节,我们将使用Ogg Theora和H.264的组合。在处理视频时,强烈建议你上网搜索一下,看看各浏览器目前对视频的支持情况,因为支持情况随时会发生变化。
还有!一旦你决定支持哪种视频格式,你可能需要一款视频格式转换器,把你手头的视频文件转换为另一种格式。Miro Video Converter是不错的选择,它支持把视频转换为任意格式,包括Ogg Theora, H.264, WebM。
在本书写作之时,Miro Video Converter可能是最常用的视频转换器,当然,你可以使用你喜欢的任何其它视频格式转换器。Miro Video Converter的下载地址为:http://www.mirovideoconverter.com/。
绘制步骤
按照以下步骤,在画布上绘制视频:
1. 创建一个跨浏览器的方法,来请求动画帧:
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
2. 定义drawFrame()函数,该函数拷贝当前视频帧,并调用drawImage()方法把视频帧粘贴到画布。然后,再请求一个新的动画帧,把它绘制到画布:
function drawFrame(context, video) {
context.drawImage(video, 0, 0);
requestAnimFrame(function() {
drawFrame(context, video);
});
}
3. 定义画布上下文,获取video标签,并且绘制视频的第一帧:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var video = document.getElementById("myVideo");
drawFrame(context, video);
};
4. 在HTML文档的body部分嵌入canvas和video标签:
工作原理
要在HTML5的画布中绘制视频,我们首先需要在HTML文档中嵌入一个隐藏的video标签。本节及后面的介绍视频的几节中,我们使用了Ogg Theora 和 H.264 (mp4)视频格式。
接下来,页面加载完成后,我们可以使用跨浏览器方法requestAnimFrame(),在浏览器允许的范围内,尽可能快的捕获视频帧,再把它们绘制到画布。
html4视频测试方法,3.4 处理视频 - HTML5 Canvas 实战相关推荐
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- html5画分形图形,2.5 绘制透明图形 - HTML5 Canvas 实战
对于需要图形分层的应用,经常需要处理透明度.本节,我们将学习如何使用全局透明度设置图形的透明度. 图2-5 绘制透明图形 绘制步骤 按照以下步骤,在一个不透明的矩形之上,绘制一个透明的圆: 1. 定义 ...
- html椭圆的写法,4.8 把圆变换为椭圆 - HTML5 Canvas 实战
缩放最常用的应用之一,就是在水平方向或垂直方向拉伸一个圆,把它变成椭圆.本节,我们将通过平移和横向上拉伸画布上下文,再绘制圆,来创建一个椭圆. 图4-10 圆变换为椭圆 绘制步骤 按照以下步骤,绘制一 ...
- html源码画螺旋,1.6 绘制螺旋线 - HTML5 Canvas 实战
注意,本节可能会使你昏昏欲睡.本节,通过连接一系列短线,我们将绘制一条螺旋线路径. 图1-10 绘制螺旋线 绘制步骤 按照以下步骤绘制一条有圆心的螺旋线: 1. 定义2D画布并初始化螺旋参数: win ...
- html5制作圆弧,1.2 绘制圆弧 - HTML5 Canvas 实战
使用HTML5画布时,有时候需要绘制完美的圆弧.如果你对绘制彩虹.笑脸.图表等感兴趣,本节将是你努力的起点. 图1-3 绘制圆弧 绘制步骤 按照以下步骤绘制一条圆弧: 1. 定义2D画布并设置圆弧样式 ...
- html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
- html 直线变曲线,2.4 玩转贝塞尔曲线:绘制云朵 - HTML5 Canvas 实战
本节,我们将通过连接一系列贝塞尔曲线的子路径绘制一朵蓬松的云,来学习如何绘制自定义图形. 图2-4 绘制云朵 绘制步骤 按照以下步骤,在画布的中央绘制一朵蓬松的云: 1. 定义2D画布上下文: win ...
- html飞机翼布局,2.11 融会贯通:绘制喷气式飞机 - HTML5 Canvas 实战
本节,我们将使用直线.曲线.图形.颜色.线性渐变.径向渐变,绘制一个矢量式的喷气式飞机,来把HTML5的画布API推到极限. 图2-12 绘制喷气式飞机 绘制步骤 按照以下步骤,绘制一个矢量式的喷气式 ...
- html5拖动图像的关键字,6.7 拖放图像 - HTML5 Canvas 实战
本节实质上是结合前两节的概念,来演示如何拖放一副图像. 操作步骤 按照以下步骤,来拖放一副图像: 1.链接到Events类: 2. 定义writeMessage()函数,该函数输出一条消息: func ...
最新文章
- JavaScript中的字符串操作(转)
- python实习做什么工作-大一/大二学生Python实习的困惑?
- 菜菜sklearn——XGBoost(3)
- GPTEE中的Storage API的使用
- 【机器学习基础】四个小项目完全解读支持向量机
- matlab 高斯迭代代码_主动降噪与双麦降噪原理与实现前篇——LMS算法的matlab实现...
- 02.规划过程组表格-需求跟踪矩阵
- au插件vst_Propellerhead改名Reason Studios,并推出插件版Reason 11
- CCNA培训课总结笔记--RIP的基本配置(五)
- win10+Linux双系统安装
- ONVIF系列——Onvif协议介绍
- Python numpy.column_stack函数方法的使用
- 纯 CSS 中的简单响应式汉堡菜单
- 关于医疗影像的mhd和dcm格式图像的读取和坐标转换
- 2007年中国邮政贺年(有奖)明信片开奖了~~
- APF有源电力滤波器Simulink仿真
- 热门的2B企业服务,资本是如何解读和判断的
- 猿创征文|一文吃透JAVA初学者的开发工具
- 生成县域级年GDP统计图
- 排序算法和查找算法总结
热门文章
- java web 默认页面配置文件_Tomcat中配置全局的错误页面(如404)+删除Tomcat中webapps目录下的自带项目,防止Tomcat默认文件泄露...
- java多模块maven_Maven和Java多版本模块
- php类使用场景,php类与对象得使用场景
- 令牌桶算法和漏桶算法有什么区别_高并发之限流,到底限的什么鬼 (精品长文)...
- java的自动装箱和拆箱,Java中的自动装箱和拆箱是什么?
- 开源|阿里巴巴的国产JDK Dragonwell:龙井
- Linus Torvalds 谈居家办公:不要在家中重新搞一个办公室
- Java 8 Stream Api 中的 map和 flatMap 操作
- 史上最易懂的Kubernetes儿童插图指南
- hpgen9服务器f10没显示,hp gen9服务器设置