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()，在浏览器允许的范围内，尽可能快的捕获视频帧，再把它们绘制到画布。