前端实现视频抽取单秒缩略图

该视频长度为2分钟

效果图

  let videoSrc =
    // "/hls/ren-20154/min-27665/de-30340/ming-21517/yi-20041/segment-1/av1/4k/playlist.m3u8";
    "/_nuxt/assets/mp4/play4.mp4";
  const res = await generateThumbnails(videoSrc, {
    width: 200,
    height: 200,
    drs: Number(testshowimage.currentTime),
  });

export const generateThumbnails = async (url: string, container: { width: number, height: number, drs: number }) => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video')
    video.crossOrigin = 'anonymous' // Enable CORS
    video.preload = 'auto' // Preload the video 5656
    // 静音
    video.muted = true;
    video.preload = 'metadata'; // 只加载视频的元数据，加快初始加载速度
    if (url.includes('/_nuxt')) {
      video.src = url;
    } else {
      var hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(video);
    }
    // 请求视频地址，如果是本地文件，直接执行
    // if (/^blob:|base64,/i.test(url)) {
    //   video.src = url;
    // } else {
    //   // mp4需要这个
    //   fetch(url).then(res => res.blob()).then(blob => {
    //     // 赋予视频
    //     video.src = URL.createObjectURL(blob);
    //   });
    // }

![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c833f8bece814f56a6066f66fb3a1d83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O55m954ix5Zad5rC0:q75.awebp?rk3s=f64ab15b&x-expires=1751781791&x-signature=y6KgKklQn74NxjvIsvXiGTh810s%3D)
    video.addEventListener('loadedmetadata', function () {
      video.currentTime = container.drs
      video.play()
    })
    video.addEventListener('seeked', function () {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d') as CanvasRenderingContext2D;
      canvas.width = 200
      canvas.height = 200
      context.drawImage(video, 0, 0, canvas.width, canvas.height)
      try {
        const frameSrc = canvas.toDataURL('image/png')
        console.log('frameSrc', frameSrc)
        video.remove()
        resolve(frameSrc)
      } catch (e) {
        console.error('Error exporting canvas as data URL:', e)
        reject(e)
      }
    })

  })

}