html video 获取图片,网页js获取视频帧图片

之前有过用优酷，我记得上传视频之后可以选择其中的一个帧做为视频的封面图片，当我们真正需要这样的功能时，我在优酷上开放平台上却没有发现相关的接口可以使用了。不过呢，好在有HTML5，而HTML5中最为强大的画布能提供强大的处理功能。代码功能实现如下：

capture screen

(function(){

var video, output;

var scale = 0.3;

var initialize = function() {

output = document.getElementById("output");

video = document.getElementById("video");

video.addEventListener('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("image/png");

output.appendChild(img);

};

initialize();

})();

效果如下：

不要问我怎么想到的，因为我也是网上借鉴别人代码的。