video第一帧作为封面(富文本html)

前言

一、须知步骤

二、代码如下（示例）

总结

---

前言

富文本编辑器越来越多的场景需要使用， 本文介绍渲染富文本的html中的视频封面将如何做处理。

一、须知步骤

1. 获取到富文本的所有的video元素

2. 循环取到video的src的url地址

3. 利用canvas对象方法绘图

4. 解决跨域问题

二、代码如下（示例）

 methods: {
     getDetail() {
         //1. 获取detail富文本接口方法(此处省略)
         //2. 拿到detail数据后,需延迟执行该方法, 否则富文本未加载无法获取富文本内video
     setTimeout(() => {
        const videos =document.querySelectorAll('video')
        videos.forEach(item=>{
             this.videoCover(item,item.firstChild.src)
             //参数item为video元素, item.firstChild.src为视频src地址
          })
       },300)
     },
    //富文本视频第一帧作为封面
    videoCover(item,url) {
      const video = item; // 获取视频对象
      let canvas = document.createElement('canvas') //创建canvas
      video.src = url; // video的url地址
      const ctx = canvas.getContext("2d"); // 绘制2d
      video.crossOrigin = "anonymous"; // 解决跨域问题
      video.currentTime = 1; // 视频第一帧
      video.oncanplay = () => {
        canvas.width = video.clientWidth; // 视频宽度
        canvas.height = video.clientHeight; //视频高度
        // 利用canvas对象方法绘图
        ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
      };
    },
}

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了video第一帧作为封面(富文本html)的功能实现