文件中載入一段視頻並將其逐幀渲染到canvas元素上。
文件名：video.html。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>視頻</title>
<style>
#canvas{background-color: #99cc33;}
#video{display: none;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<video id="video" width="600" autoplay>
<source src="resource/成龍 - 醉拳.mkv"/>
<p>該瀏覽器不支持該視頻</p>
</video>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),
video = document.getElementById("video");
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){
return window.setTimeout(callback,1000/60);
})
};
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.drawImage(video,0,0);
}());
}
</script>
</body>
</html>效果圖：
參見《HTML5+Javascript動畫基礎》。