获取视频某一帧设置封面

个人观点：这种处理尽量还是放在服务端去处理比较好的，如果视频比较大的情况，前端加载都得半天，非常影响页面操作体验。当然，如果你没能说服服务端大佬去处理，试试下面的处理方式也未尝不可~

原理

原理其实也通俗易懂，就是生成一个DOM去加载视频，设置视频停在某一帧，然后借助canvas生成图片。

实现

/**
 * 获取视频封面
 * @param {*} videoUrl 视频链接
 * @param {*} frames 帧数
 */
const getVideoFrame = (videoUrl, frames) => {
  const video = document.createElement('video');
  video.width = 200;
  video.height = 200;
  video.src = videoUrl;
  video.currentTime = 1/60 * frames;
  video.setAttribute('crossOrigin', 'anonymous');
  video.oncanplay = () => {
    const oCanvas = document.createElement('canvas');
    oCanvas.width = video.width;
    oCanvas.height = video.width;
    oCanvas.getContext("2d").drawImage(video, 0, 0, video.width, oCanvas.height);
    const base64 = oCanvas.toDataURL("image/png");
    console.log(base64, '图片地址');
  }
};