使用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)
    },
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共3条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像Mark0
    • 头像顾梨0
    • 头像老王0