js截取视频的封面图片-原创手记-慕课网

js截取视频的封面图片原创

西江无月 2018-06-30 19:29:30 浏览 11104

西江无月

关注TA

手记 7

粉丝 30

获赞 187

之前我听过有人说过这个需求，这几天偶然闲下来了，就写写吧

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video id="video" controls="controls">
<source src="XXX.MP4">
</video>
<div id="imgbox"></div>
<script type="text/javascript">
(function(){
var video, output;
var scale = 0.8;
var init = function() {
imgbox = document.getElementById("imgbox");
video = document.getElementById("video");
video.addEventListener('loadeddata',captureImage);
};

var captureImage = function() {
            var canvas = document.createElement("canvas");//创建一个canvas
            canvas.width = video.videoWidth * scale;//设置canvas的宽度为视频的宽度
            canvas.height = video.videoHeight * scale;//设置canvas的高度为视频的高度
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//绘制图像

            var img = document.createElement("img");//创建img
            img.src = canvas.toDataURL("image/png");//将绘制的图像用img显示出来
            imgbox.appendChild(img);//将img添加到imgbox里
};

init();
})();
</script>
</body>
</html>

完结

1人推荐

发表评论