截取视频第一帧图片

利用canvas的drawImage() API,第一个参数传video可以将视频当前帧画到画布上，（这里示例是第一帧），

以下代码需要注意：因为跨域限制，必须放到web服务器上运行（比如localhost），如果直接是在硬盘上的文件系统打开是不行（file://...)的。

另外，这里示例上用的是本地存了一个视频文件，实际项目时如果脚本和视频不在同一个域还是会发生跨域问题，参数另一篇帖子。

 getVideoCover() 就是获取视频的函数，可以直接调用。

<!DOCTYPE html>
<html>

<body>
    <img id="img">
    <script>
        function getVideoCover(url, width = null, height = null) {
            return new Promise((resolve, reject) => {
                const canvas = document.createElement('canvas');
                const video = document.createElement('video');
                document.body.appendChild(video);
                video.setAttribute('crossOrigin', 'anonymous');
                canvas.width = width ? width : video.clientWidth;
                canvas.height = height ? height : video.clientHeight;
                video.style.height = '0';

                video.onloadeddata = (() => {
                    setTimeout(() => {
                        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                        let b64 = canvas.toDataURL('image/png');
                        document.body.removeChild(video);
                        resolve(b64);
                    }, 100);
                });
                video.setAttribute('src', url);
            });
        }
        getVideoCover('./videoplayback.mp4', 200, 150).then((base64) => {
            document.getElementById('img').setAttribute('src', base64);
        });
    </script>
</body>

</html>

 

posted @ 2020-09-26 19:00  johnjackson  阅读(1109)  评论(0)  编辑  收藏  举报