javascript实现获取视频封面，实现本地预览功能

骆驼一小只

已于 2023-09-22 10:42:38 修改

阅读量1.2k

点赞数 3

文章标签： javascript 音视频前端

于 2023-08-25 16:22:59 首次发布

本文链接：https://blog.csdn.net/qq_41812656/article/details/132498304

版权

主要思路就是监听视频播放，然后通过canvas去绘制想要获取的某一时刻的画面

// videoFile: 要解析的视频文件资源， time: 获取视频某一时刻的画面
function captureFrame(videoFile, time = 0) {
  return new Promise((resolve) => {
    // 因为dom节点没有渲染到浏览器，视频播放到指定的时间就会停止播放
    const videoElement = document.createElement('video');
    videoElement.currentTime = time; // 设置截取的帧时间
    // 自动播放存在兼容性问题，设置静音解决自动播放在不同浏览器的兼容性问题
    videoElement.muted = true; 
    videoElement.autoplay = true;
    videoElement.src = URL.createObjectURL(videoFile);
    videoElement.oncanplay = async function () {
      const flame = await drawVideoToCanvas(videoElement);
      resolve(flame); 
    };
  });
}

将拿到的视频画面通过canvas绘制出来：

function drawVideoToCanvas(video) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    canvas.toBlob((blob) => {
      resolve({
        blob, // 将封面提交到服务端
        url: URL.createObjectURL(blob), // 实现本地预览
      });
    });
  });
}