js截取视频第一帧作为封面

在vue的v-for循环中，直接video标签进行列表渲染时，滚动列表页面会很卡，所以最好以img标签渲染视频封面图，点击后再播放视频。

具体代码如下：

//取视频的第一帧作为封面
function cutPicture(item) {   //这里的item是列表的每一项
  let video = document.createElement("video");
  video.style = "position:fixed; top: 9999px;left:9999px;z-index:-9999";
  video.preload = "metadata";
  video.currentTime = 1; //截取的视频第一秒作为图片
  video.src = item.videoUrl;
  video.setAttribute("crossOrigin", "anonymous");
  video.width = 113;
  video.height = 75;
  document.body.appendChild(video);
  video.onloadeddata = function () {
    let canvas = document.createElement("canvas");
    canvas.width = 113;
    canvas.height = 75;
    canvas.getContext("2d").drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
    var oGrayImg = canvas.toDataURL("image/jpeg");
    item.imgUrl = oGrayImg; //这里输出的imgUrl就是视频的封面图
    this.remove();
  };
  return item;
}