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

 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);
      };
    },
}