之前有过用优酷,我记得上传视频之后可以选择其中的一个帧做为视频的封面图片,当我们真正需要这样的功能时,我在优酷上开放平台上却没有发现相关的接口可以使用了。不过呢,好在有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();

})();

效果如下:

0818b9ca8b590ca3270a3433284dd417.png

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐