首页 > Web开发 > 详细

js+html5实现视频截图

时间:2015-09-27 13:45:38      阅读:203      评论:0      收藏:0      [点我收藏+]
 
<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

js+html5实现视频截图

原文:http://www.cnblogs.com/yang95/p/4842141.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!