优化实战 第 19 期 - 生成视频文件指定帧为封面

在页面上展示视频时，如果给视频设置一个封面图，既可以强化视觉体验，也可以增加视频的吸引力，这是非常棒的用户体验

思路方案

• 设置视频源以及视频加载时长

• 添加监听事件，在指定的帧数据加载完成后通过 Canvas 抓取当前帧绘制图像

• 将 Canvas 图像转换为 blob 对象

代码封装

• 参数注解

  /**
  * 截取视频封面
  *
  * @param {File} file 文件对象
  * @param {Number} time 视频加载时长
  * @param {Number} coverWidth 封面宽度
  */
  

• 方法封装

  const captureImage = (file, time = 1, coverWidth = 300) => {
    return new Promise((resolve, reject) => {
      const element = document.createElement('video')
      // 设置视频源以及视频加载时长
      Object.assign(element, { 
        src: URL.createObjectURL(file), currentTime: time 
      })
      // 添加监听事件：在指定的帧数据加载完成后
      element.addEventListener('loadeddata', function() {
        const { videoWidth, videoHeight } = this
        // 创建画布
        const canvas = document.createElement('canvas')
        // 根据指定的封面宽度，等比例设置画布大小
        Object.assign(canvas, { 
          width: coverWidth, height: coverWidth / videoWidth * videoHeight 
        })
        canvas
          .getContext('2d')
          // 以视频元素作为图片源，从中抓取当前帧作为一个图像
          .drawImage(this, 0, 0, canvas.width, canvas.height)
        canvas
          // 将 Canvas 图像转换为文件
          .toBlob(blob => {
            URL.revokeObjectURL(this.src)
            resolve(blob)
            // 可对 image/jpeg 和 image/webp 的图片格式指定展示质量
          }, 'image/jpeg', 0.95)
      })
    })
  }
  

  在不影响图像的正常视觉下，调整所需的文件格式和图像质量，以此来降低图像的大小，提升加载的速度

关联技术

可以通过 第17期 - 防止修改文件扩展名上传文件 的方案来确保是正常的视频文件

一起学习，加群交流看 沸点