JS 怎么获取视频第一帧作为封面图？？？

Question

JS 怎么获取视频第一帧作为封面图，网上找了很多方法，都是空白的。。。新手，求指点，跪谢~

Answer 1

这种场景用浏览器 JS 并不合适，因为都要加载一部分视频，会对服务器和带宽带来不小的压力。

应该在服务器端生成截图和缩略图，然后直接加载缩略图作为 placeholder。

Answer 2

主要用到的技术是H5的video标签和canvas的绘制图片，思路就是将视频用video标签加载到指定的时间帧，然后再将video会知道canvas中即可。下面给出一个可行的实现代码，题主可以自行调试

function captureFrame(videoFile, time =0) {
  const video =document.createElement('video');
  video.currentTime = time; // 设置视频停留到指定时间帧
  video.muted = true;
  video.autoPlay = true; // 设置视频加载完后自动播放，这样才能加载到指定时间的画面
  video.src = URL.createObjectURL(videoFile);
  video.canplay = () => {
    const canvas = document.createElement('canvas');
    // 在视频数据加载完成后执行
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    let imgDataUrl = canvas.toDataURL('image/png');
    // 将imgDataUrl发送到服务器，或者直接使用它作为封面图
  };
}

Answer 3

<video id="myVideo" src="path/to/video.mp4" width="640" height="480"></video>
<canvas id="canvas" width="640" height="480"></canvas>

const video = document.getElementById('myVideo');  
const canvas = document.getElementById('canvas');  
const context = canvas.getContext('2d');

const videoWidth = video.videoWidth;  
  const videoHeight = video.videoHeight;
  function getFirstFrame() {
      video.addEventListener('loadeddata', function() {
          context.drawImage(video, 0, 0, videoWidth, videoHeight);  
      });  
  }

这个呢

Answer 4

就使用机器人提供的方案就可以了

let video = document.createElement('video');
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

// 视频源
video.src = 'path/to/your/video.mp4';

video.addEventListener('loadeddata', function() {
    // 在视频数据加载完成后执行
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    let imgDataUrl = canvas.toDataURL('image/png');
    // 将imgDataUrl发送到服务器，或者直接使用它作为封面图
});

Answer 5

需要将视频先解析，目前兼容性还不好，建议服务端做