关于vue.js:javascript截取video视频第一帧作为封面方案

写在前边：因为我的项目是用vue.js框架实现，所以以下代码是vue.js语法。

首先，看一下Dom元素（video相干属性和事件）：

<video  @loadeddata="createPreImg($event)" // loadeddata事件示意media中的首帧曾经加载  class="content-video"  :src="item.videoUrl" // 视频地址（能够是以后域下的，也能够是其余域下的）  crossorigin="anonymous" // 容许跨域（因为浏览器的同源策略，如果视频是其余域，须要设置此属性）  preload="auto" // 预加载（挪动端须要设置此属性，因为挪动端有很多播放限度，很多都不会主动加载）></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 = canvas.toDataURL('image/png');            // 创立img元素 插入到文档中      const img = document.createElement('img');      img.src = imgSrc;      img.style.position = 'absolute';      img.style.left = '0';      img.style.top = '0';      img.style.objectFit = 'cover';      videoEle.parentNode && videoEle.parentNode.appendChild(img);    });  }

通过测试，在小米手机Mix2机型上，能够展现封面；

倡议：因为挪动端手机机型泛滥，视频在挪动端的播放限度也比拟多，所以封面的解决最好放在服务端解决，以缩小不同机型兼容性带来的问题。