前端开发如何获取视频第一帧作为封面

首先说明一下，浏览器或者手机需要支持video标签。

从H5本身来说，这里用到了video的一个属性，poster(规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。).

然后还有一个video的事件，loadeddata（当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。）。

所以要提醒一下,如果不是用框架来监听的，就自己手动用addEventListener来监听视频是否已经加载好，可以截取第一帧了。

从网上搜的资料总结一下：

都是选择用canvas来得到第一帧图片。总的来说的过程是

A：创建video标签

B：canvas无法处理跨域的图片，所以需要处理跨域请求。将图片的 crossOrigin设置成anonymous。

C：处理视频的宽，高和URL链接

D：监听video的loadeddata事件，在事件中使用canvas绘制画布

E：canvas创建好了之后使用toDataURL将图片转成base64

F：绘制图片

附上代码：

 getVideoBase64(url) {
        return new Promise(function (resolve, reject) {
            let dataURL = '';
            let video = document.createElement("video");
            video.setAttribute('crossOrigin', 'anonymous');//处理跨域
            video.setAttribute('src', url);
            video.setAttribute('width', 400);
            video.setAttribute('height', 240);
            video.addEventListener('loadeddata', function () {
                let canvas = document.createElement("canvas"),
                    width = video.width, //canvas的尺寸和图片一样
                    height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
                resolve(dataURL);
            });
        })
    }

PS：这里转载自知乎作者，刘超杰。如果我的看不懂可以去看看原博客。

再记录一下，使用element的框架怎么截取第一帧。原理和上面一致，就不具体写怎么弄了。给一个链接地址，如果有这方面需求，可以去简书上看看这篇文章。 《vue 截取视频第一帧》作者：执着的小猪仔

每天进步一点点，冲冲冲！