HTML5 中捕捉视频的小TIPS

jackyrong

今天发现一段不错的HTML 5小TIPS,主要是在支持HTML 5的浏览器上,
在播放视频时,可以点按钮,而把当前帧的图象CUT到一个canvas中去,下面上代码:

var videoId = 'video';var scaleFactor = 0.25;var snapshots = []; /** * Captures a image frame from the provided video element. * * @param {Video} video HTML5 video element from where the image frame will be captured. * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter. * * @return {Canvas} */function capture(video, scaleFactor) {if(scaleFactor == null){scaleFactor = 1;}var w = video.videoWidth * scaleFactor;var h = video.videoHeight * scaleFactor;var canvas = document.createElement('canvas');canvas.width  = w;canvas.height = h;var ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, w, h);return canvas;}  /** * Invokes the <code>capture</code> function and attaches the canvas element to the DOM. */function shoot(){var video  = document.getElementById(videoId);var output = document.getElementById('output');var canvas = capture(video, scaleFactor);canvas.onclick = function(){window.open(this.toDataURL());};snapshots.unshift(canvas);output.innerHTML = '';for(var i=0; i<4; i++){output.appendChild(snapshots);}}

HTML 部分代码:
[align=center;]<video id="video" width="320" controls="true"><source src="video.ogv"><!-- FireFox 3.5 --><source src="movie.mp4"><!-- WebKit -->Your browser does not support HTML5 video tag. Please download FireFox 3.5 or higher.</video><br/><button  style="width: 64px;border: solid 2px #ccc;">Capture</button><br/><div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;"></div>

样例在:http://appcropolis.com/blog/using-html5-canvas-to-capture-frames-from-a-video/