javascript截取video视频第一帧作为封面方案 javascript截取video视频第一帧作

【javascript截取video视频第一帧作为封面方案】写在前边：因为项目是用vue.js框架实现，所以以下代码是vue.js语法。
首先，看一下Dom元素（video相关属性和事件）：

其次，是javascript部分代码：

createPreImg(event) {// event js原生事件const videoEle = event.target; // 当前video dom节点videoEle.currentTime = 1; // 设置视频开始播放时间（因为有些手机第一帧显示黑屏，所以这里选取视频的第一秒作为封面）videoEle.addEventListener('canplay', function () { // 监听video的canplay事件// 创建canvas元素并设置canvas大小等于video节点的大小 const canvas = document.createElement('canvas'); const scale = 0.8; // 压缩系数 canvas.width = videoEle.videoWidth * scale; canvas.height = videoEle.videoHeight * scale; // canvas画图 canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height); // 把canvas转成base64编码格式 const imgSrc = https://www.it610.com/article/canvas.toDataURL('image/png'); // 创建img元素插入到文档中 const img = document.createElement('img'); img.src = https://www.it610.com/article/imgSrc; img.style.position ='absolute'; img.style.left = '0'; img.style.top = '0'; img.style.objectFit = 'cover'; videoEle.parentNode && videoEle.parentNode.appendChild(img); }); }

经过测试，在小米手机Mix2机型上，可以展示封面；
建议：由于移动端手机机型众多，视频在移动端的播放限制也比较多，所以封面的处理最好放在服务端处理，以减少不同机型兼容性带来的问题。