时间：2021-07-01 10:21:17 帮助过：2人阅读
JavaScript截取video标签视频缩略图,前几天做个小项目以瀑布流加载MP4视频,一个页面差不多会加载100个MP4视频原始做法就是直接显示所有video标签视频,但是会发现,当其中有一个视频太大卡住了,接下去的所有视频都没办法显示视频缩略图。想显示视频缩略图,但又不想直接显示视频出来。通过搜索和结合项目实现了以下小代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js">
</script>
<style>
</style>
<script type="text/javascript">//--获取视频缩略图--
function vload(obj) {
$(obj).removeAttr("poster");
var vimg = $("<img/>")[0];
captureImage(obj, vimg);
$(obj).after(vimg);
$(obj).remove();
};
var scale = 0.8; //缩放
function captureImage(video, output) { //截图
try {
var videocanvas = $("<canvas/>")[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";
}
};
//--获取视频缩略图--
</script>
</head>
<body>
<video src="视频地址" preload="metadata" onloadeddata='vload(this)' poster="加载动画.gif">
</video>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
Angularjs的promise对象详解
angularJS的ng-bind-html指令详解
以上就是JS可以截取video的标签视频缩略图吗？的详细内容，更多请关注Gxl网其它相关文章！