video标签获取第一帧的图片作为预览图

video其实有 poster 属性的。 如果有这个属性 浏览器 会自动把第一帧当做展示图， 但是移动端有的手机不支持。
 
我们 poster = ‘图片链接’ ,  这样是可以把图片当做视频的预览图。
 
那没有图片链接怎么办：  
注意：以下方法的视频连接，必须和文件在同一个域名下，否则不生效！！！
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <video id="video" controls="controls" width="400" height="300">
        <source src="./video/78.mp4">
    </video>
    <br>
    <br> 视频第一帧图片：
    <div id="output"></div>
    <script type="text/javascript">
        (function() {
            var video, output;
            var scale = 0.8;
            var initialize = function() {
                output = document.getElementById("output");
                video = document.getElementById("video");
                video.addEventListener('loadeddata', 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");
                img.width = 400;
                img.height = 300;
                output.appendChild(img);
            };
            initialize();
        })();
    </script>
</body>
</html>

 

posted @ 2018-03-09 14:15  小则又沐风  阅读(36384)  评论(3)  编辑  收藏  举报