使用Canvas播放视频

    <video
      class="video"
      autoplay
      playsinline
      webkit-playsinline
      loop
      muted
      x5-video-player-type="h5"
      x5-playsinlin="true"
      v-show="false"
      id="video1"
    >
      <source src="@/assets/mp4/RENDER_1.mp4" />
    </video>

    <canvas id="canvas-1" class="canvas"> </canvas>


play() {
      var video = document.getElementById('video1')
      var canvas = document.getElementById('canvas-1')
      var ctx = canvas.getContext('2d')
      this.CanvasW()
      video.play()
      this.timer = setInterval(function () {
        ctx.drawImage(
          video,
          (canvas.width - video.videoWidth) / 2,
          (canvas.height - video.videoHeight) / 2,
          video.videoWidth,
          video.videoHeight
        ) //绘制视频
      }, 16)
    },