使用canvas播放视频

前期规划

• 将视频隐藏正常播放
• 将播放取到画面使用setInterval循环在画布上显示画面，由于 1s 差很少25-30帧，选择每40ms循环一次
• 绘画中的大小，宽度等于100%，高度垂直居中。x 为 0，y 为(canvas.height - video.height)/2/canvas缩放倍数
• 视频暂停或者播放结束后，清除定时器

代码以下

html代码

<video id="main-video" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x5-video-orientation="portraint" x5-video-player-fullscreen="true" x5-video-player-type="h5" style="display: none">
  <source id="js-video-source" src="<%=detail.videoUrl || ''%>" ></source>';
</video>
<canvas style="width: 100%; height:100%" id="canvas"></canvas>

js代码

function renderCanvas () {
  let $canva, ctx, $video, setInter;
  $canva =$('#canvas');
  $video = $("#main-video");
  ctx = $canva[0].getContext('2d');
  $canva.style.width = $canva.parents().width() / 2;
  $canva.style.height = $canva.parents().height() / 2;
  $video[0].play();

  render();
  setInter = setInterval(r => {
    render();
  }, 40)

  function render () {
    ctx.drawImage($video[0], 0, (canvas.height - video.height)/2/2, video.width(), video.height());
  }

  // 视频播放结束
  $video[0].on('ended', function () {
    clearInterval(setInter);
  });

  // 视频被暂停
  $video[0].on('pause', function () {
    clearInterval(setInter);
  });
}