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