vue + canvas 截取視頻的預覽圖

在頁面中加載太多的視頻，會造成頁面加載慢，所以在顯示視頻的地方顯示視頻的預覽圖。用vue 和 canvas 截取視頻的預覽圖。

示例圖：
demo:

<template>
<div id="demo">
  <div class="video-wrapper" :style='videoBgStyle(item)' v-for="(item,index) in videoList" :key="index">
    <span class="playBg">
      <span class="playIcon"></span>
    </span>
  </div>
</div>
</template>
<script>
export default {
  name: "demo",
  data: () => ({
    videoList: [{
      src: 'http://v.xiaohongshu.com/fe7e28583f77d1a870df14ec347af9853417af7e_v1_ln?sign=6a4c5d5a3dc9467a0da8f22b8b6f8580&t=5e6cff80'
    }, {
      src: 'http://v.xiaohongshu.com/8a7a631ef8123e87c29cfcfbf90fc93d6e7b601e_v1_ln?sign=1565f2d17847bdea7105eb7745e1fd26&t=5e6cff80'
    }, {
      src: 'http://v.xiaohongshu.com/204d85f824887c00878e90cbce168da3c4dc2565_v1_ln?sign=1b82f9f78976d3505ac9f460bfdeed2d&t=5e6cff80'
    }, {
      src: 'http://v.xiaohongshu.com/aaa3e9a2dfef3541ba58da45dac4e44cd572bc0c_v1_ln?sign=4271a721d45054108a7417c792de1714&t=5e6cff80'
    }]
  }),
  created() {
    this.getVideoposter()
  },
  methods: {
    videoBgStyle(value) {
      return 'background: #D8D8D8 url("' + value.poster + '") no-repeat top/' + value.width + 'px ' + value.height + 'px;'
    },
    getVideoposter() {
      let self = this;
      this.videoList.forEach((item) => {
        let video = document.createElement('video');
        video.setAttribute('crossOrigin', 'Anonymous')
        video.src = item.src;
        //如果不設置currentTime，畫出來的圖片是空的
        video.currentTime = 0.001;
        video.onloadeddata = loadedmetadata;

        function loadedmetadata(e) {
          let canvas = document.createElement('canvas');
          let vWidth = e.path[0].videoWidth;
          let vHeight = e.path[0].videoHeight;
          //判斷視頻的高度和寬度
          //畫布的大小，由設置的視頻顯示的大小決定，以免畫布太大，畫的圖片太大，浪費資源，這裏設置顯示視頻盒子爲width:140px，height:140px;
          //設置倍數是rate，倍數越大畫圖的圖片越大，加載速度越慢
          //https://www.w3school.com.cn/html5/canvas_drawimage.asp
          let rate = 4;
          canvas.width = 140 * 4;
          canvas.height = vHeight * 140 / vWidth * 4;
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
          let url = canvas.toDataURL('image/png', 1);
          //顯示背景圖片的大小，保證在不壓縮圖片的情況下，背景圖片能鋪滿
          let widthBg, heightBg;
          if (vWidth < vHeight) {
            widthBg = 140;
            heightBg = vHeight * 140 / vWidth;
          } else {
            widthBg = vWidth * 140 / vHeight;
            heightBg = 140;
          }
          self.$set(item, 'poster', url);
          self.$set(item, 'width', widthBg)
          self.$set(item, 'height', heightBg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#demo {
    margin-top: 200px;
    margin-left: 200px;
}
.video-wrapper {
    position: relative;
    float: left;
    width: 140px;
    height: 140px;
    margin-right: 30px;
    cursor: pointer;
    background: #D8D8D8;
    video {
        width: 100%;
    }
    //播放按鈕的樣式
    .playBg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 0;
        height: 0;
        border: 25px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        .playIcon {
            position: absolute;
            left: -3px;
            top: -8px;
            height: 0;
            width: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid #fff;
            border-right: 0 solid transparent;
        }
    }
}
</style>