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

huangsh - 2021-08-19 06:18:27

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

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

<video
  @loadeddata="createPreImg($event)" // loadeddata事件表示media中的首帧已经加载
  
  :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机型上，可以展示封面；

建议：由于移动端手机机型众多，视频在移动端的播放限制也比较多，所以封面的处理最好放在服务端处理，以减少不同机型兼容性带来的问题。

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇： crudapi增删改查接口零代码产品成功案例之金茶王投票系统

下一篇：万字详文：彻底搞懂 Jest 单元测试框架