js+html5实现视频截图

 
<video id="video" controls="controls">
<source src=".mp4" />
</video>
<button id="capture">Capture</button>
<div id="output"></div>

　　上述代码实现加载html,video标签是html5的标签可以在浏览器上直接加载视频并播放

 
var video, $output;
var scale = 0.25;


var initialize = function() {
$output = $("#output");
video = $("#video").get(0);
$("#capture").click(captureImage);
};

var captureImage = function() {
      var canvas = document.createElement("canvas");
      canvas.width = video.videoWidth * scale;
      canvas.height = video.videoHeight * scale;
      canvas.getContext('2d')
      .drawImage(video, 0, 0, canvas.width, canvas.height);
      var img = document.createElement("img");
      img.src = canvas.toDataURL();
       $output.prepend(img);
};
 
$(initialize);

上述代码实现从video加载一附图片并画出实现转换img