[html5]HTML5如何实现视频截图功能的代码

本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下：

1. HTML部分：

<video id="video" controls="controls"> 
  <source src="http://www.cuplayer.com/test.mp4" /> 
</video> 
<button id="capture">Capture</button> 
<div id="output"></div> 

2. 点击按钮时触发如下代码：

(function() { 
  "use strict"; 
  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);       
}()); 

希望本文所述对大家的javascript程序设计有所帮助。