【附源码】跨界救场:如何用纯前端的方式获取视频首帧

大前端 @ 转转

背景

最近在搬砖时遇到一个问题,在商详页面有些商品只有视频,没有封面图。

我们的交互是用户点击视频封面图调用 native 播放器播放视频,没有封面图视频就没有了载体,就不能展示了。

这个问题有3种解决方案:

  1. 后端处理:这种方案虽然可行,但是会影响接口性能,在商详这种关键页面得不偿失。
  2. 客户端处理:客户端处理需要在进入商详页面前预加载视频,会影响页面响应速度,也不太合理。
  3. 前端处理:前端处理必然会用到 video 标签来承载视频,考虑到 video 标签在移动端会有很多兼容性问题,处理起来很复杂,同时也会带来加载的性能消耗。

基于上述三个方案,我们决定在源头解决这个问题,在创建商品时动态获取视频封面并保存。

考虑到这是一个公共能力,我们把处理逻辑写成公共的 npmvideo-cover(www.npmjs.com/package/vid…) ,有兴趣的可以去 npm 上下载和使用。

接下来给大家分享一下这个包的实现方案和使用方法。


进入正题

效果展示

首先我们看下实际使用效果。

获取视频首帧整体过程是比较流畅的,当然,具体的获取时间取决于视频的质量和网速。


整体思路

  1. 动态创建 video 标签,加载视频。通过 video 的 timeupdate 事件来获取截取图片的时机。
  2. 创建 canvas 画布,通过 drawImage 来绘制图像,然后通过 toDataURL 来导出图像信息。
  3. 最后封装一些功能方法来方面使用。

兼容性

canvas 对我们来说是一个熟悉又陌生的技术,在一些技术文档种经常有它的身影出现,但是业务中使用到的地方又不是很多。

要使用这个技术,首先我们来看下兼容性,兼容性不好的话再好的技术也难以运用到业务中去。

canvas兼容性

从上图看来大部分浏览器兼容性没问题,话不多说,开始上代码


代码展示

首先我们要创建 video 标签,这步是关键,图像能不能截取成功就取决于视频能不能展示了。

如果你使用的是网络图片,并且是跨域的。
必须要设置 videocrossOrigin = 'Anonymous',对此元素的 CORS 请求将不设置凭据标志。

否则使用canvas的 toDataURL api会报错 提示:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
复制代码

大概意思就是画布被污染。

文档:参考文档[1]

getVideoCover(callback) {
    const self = this;

    const video = this.video || document.createElement("video");
    const currentTime = self.currentTime;
    video.src = self.url;
    video.style.cssText = `position: fixed; top: -100%; width: 400px; visibility: hidden;`;
    video.controls = "controls";
    // 此处是设置跨域,防止污染canvas画布
    video.crossOrigin = "Anonymous";

    // 设置视频播放进度
    video.currentTime = currentTime;

    // 监听播放进度改变,获取对应帧的截图
    video.addEventListener("timeupdate", () => {
        self.setVideoInfo();

        if (self.currentTime <= self.duration) {
            self.generateCanvas(callback);
        } else {
            self.nextTime()
        }
    });

    this.video = video;

    // 此处必须要append到页面中去,否则会由兼容性问题
    document.body.appendChild(video);
}
复制代码

通过修改 videocurrentTime 属性,来切换视频的进度,从而触发 timeupdate 事件,完成截图操作。

创建完 video ,接下来就是最关键的部分了,图片生成。

主要思路:

  1. 首先创建一个 canvas
  2. 添加对应的尺寸,这个尺寸尽量和视频的比例保持一致,否则生成的图片会变形。
  3. 通过 toDataURL 生成 base64 ,直接在页面展示就可以了。
generateCanvas(callback) {
    const self = this;
    const canvas = this.canvas || document.createElement("canvas");

    // 此处添加 alpha 属性,可以忽略透明度,减少图片体积
    const ctx = canvas.getContext("2d", { alpha: false });
    const imgWidth = this.imgWidth;
    const isCheckImageColor = this.isCheckImageColor;
    let videoWidth = this.videoWidth;
    let videoHeight = this.videoHeight;

    if (!this.canvas) {
        if (imgWidth) {
            videoHeight = imgWidth / (videoWidth / videoHeight);
            videoWidth = imgWidth;
        }

        canvas.width = videoWidth;
        canvas.height = videoHeight;
    }

    ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);

    // 如果开启图片校验模式
    if (isCheckImageColor) {
        const checkImageResult = this.checkImage(ctx, videoWidth, videoHeight);

        // 如果图片是纯色图片,会获取切换播放时间,获取下一秒的截图
        if (!checkImageResult) {
            this.nextTime();

            return;
        }
    }

    const img = canvas.toDataURL(this.imageType, self.quality);

    callback && callback(img);
}
复制代码

写到此处,基本的功能已经实现了,接下来就介绍一些工具方法来让我们的功能更加的完善。

  • 图片内容校验。
    有些视频的前 1s 是黑屏,这样截下来的图片是没有任何价值的,为了避免这种问题。我对视频做了是否是纯色的校验。

    使用 canvasgetImageData 来获取图片像素信息。

    getImageData 会返回一个 Uint8ClampedArray 的类型化数组。

    每一个值存储的是 0-255 的整型。

    每4个为一组,分别代表 R G B A。

    遍历整个数组,如果发现颜色值的种类超过配置的数量,即为有图像的图,否则为纯色图。

    如果大家有更好的处理方案,欢迎在评论区域留言。

      checkImage(ctx, width, height) {
          const imgData = ctx.getImageData(0, 0, width, height);
          const imgDataContent = imgData.data;
          const rgbObj = {};
          let differentLen = 0;
    
          for (let i = 0, len = imgDataContent.length; i < len; i += 4) {
              const key = imgDataContent.slice(i, i + 4).join("");
    
              if (!rgbObj[key]) {
                  rgbObj[key] = 1;
                  differentLen++;
              }
    
              // 判断如果颜色超出100种,不是纯图
              if (differentLen > 100) {
                  return true;
              }
          }
    
          return false;
      }
    复制代码
  • base64Blob 对象。
    图片本地下载和保存到服务器都需要将base64转换成 Blob对象。

    具体实现步骤为:

    1. 通过 window.atob 方法将 base64 解码。
    2. 初始化一个 Uint8Array 类型化数组。
    3. 遍历解码之后的 base64,将每个字符转换成 Unicode 码,并 pushUint8Array 中。
    4. 最后通过 new Blob() 来生成 Blob 对象。
      static base64ToBlob(code) {
        if (!code) {
          console.warn("base64不能为空");
          return;
        }
    
        let parts = code.split(";base64,");
        // 获取图片类型
        let contentType = parts[0].split(":")[1];
    
        /**
          * 解码base64
          * Window atob() 方法
          * encodedStr: 必需,是一个通过 btoa() 方法编码的字符串。
          * 该方法返回一个解码的字符串。
          */
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
    
        // Uint8Array 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。
        let uInt8Array = new Uint8Array(rawLength);
    
        // 将字符转换成unicode值
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
    
        return new Blob([uInt8Array], {
          type: contentType,
        });
      }
    复制代码
  • 下载文件

    static downloadFile(code) {
      const fileName = Date.now();
    
      if (!code) {
      console.warn("base64不能为空");
      return;
      }
    
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(code);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    }
    复制代码

接下来介绍下使用方法

通过 new VideoCover() 来初始化配置信息

const cover = new VideoCover({
    // 视频链接
    url: 'https://cdn.huodao.hk/zhaoliangjiadv2.mp4',
    // 初始截图位置,取值范围 1- 视频长度,默认为 1
    currentTime: 1,
    // 生成图片宽度,高度按照视频比例自动计算,默认为800px
    imgWidth: 600,
    // 图片质量,范围 0.2-0.95,默认为 0.95
    quality: 0.9,
    // 图片类型,默认为 image/jpeg
    imageType: 'image/jpeg',
    // 是否开始图片检查,如果为纯图自动获取下一秒,默认为false
    isCheckImageColor: true, 
})
复制代码

api方法

  • 生成截图
    getVideoCover
    参数:
    @param { Function } callback 回调函数 示例:

      cover.getVideoCover((res) => {
          console.log(res)
      })
    复制代码
  • 获取下一秒视频截图 nextTime 参数:无 示例:

    cover.nextTime()
    复制代码
  • 获取指定位置视频截图 jumpTime 参数: @param { Number } time 时间秒数 示例:

    cover.jumpTime(20)
    复制代码

最后试了一下,在 chrome,firefox 等主流浏览器都是可以的。

由于 video 在移动端的兼容性不是很好,此插件适用于 PC 端。

未来我们会兼容移动端,希望能在更多的平台得到运用。

本文源码:github.com/18823752727…

npm包地址:www.npmjs.com/package/vid…

最后

最后,感谢您的阅读,有任何问题,欢迎评论区留言讨论,互相学习~ 本月我们将推出更多实践相关文章及有奖留言活动,也欢迎扫描下方二维码关注我们的微信公众号及时获取 ↓

参考文档:

  1. 安全性和“被污染”的 canvas
    developer.mozilla.org/zh-CN/docs/…

  2. Uint8Array
    developer.mozilla.org/zh-CN/docs/…

  3. Blob
    developer.mozilla.org/zh-CN/docs/…

  4. Base64的编码与解码
    developer.mozilla.org/zh-CN/docs/…

  5. createObjectURL developer.mozilla.org/zh-CN/docs/…

文章分类
前端