html视频标签略缩图,JS可以截取video的标签视频缩略图吗？

这次给大家带来JS可以截取video的标签视频缩略图吗？，JS截取video的标签视频缩略图的注意事项有哪些，下面就是实战案例，一起来看一下。

JavaScript截取video标签视频缩略图,前几天做个小项目以瀑布流加载MP4视频,一个页面差不多会加载100个MP4视频原始做法就是直接显示所有video标签视频,但是会发现,当其中有一个视频太大卡住了,接下去的所有视频都没办法显示视频缩略图。想显示视频缩略图,但又不想直接显示视频出来。通过搜索和结合项目实现了以下小代码。

function vload(obj) {

$(obj).removeAttr("poster");

var vimg = $("")[0];

captureImage(obj, vimg);

$(obj).after(vimg);

$(obj).remove();

};

var scale = 0.8; //缩放

function captureImage(video, output) { //截图

try {

var videocanvas = $("")[0];

videocanvas.width = video.videoWidth * scale;

videocanvas.height = video.videoHeight * scale;

videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);

output.src = videocanvas.toDataURL("image/png");

delete videocanvas;

} catch(e) {

output.src = "加载动画.gif";

}

};

//--获取视频缩略图--

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：