捕捉视频图像

使用drawImage可以接受一个video的dom作为参数:

<video src="http://xiaoyulive.oss-cn-beijing.aliyuncs.com/imgs/mov_bbb.mp4" controls></video>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
  let canvas = document.getElementById('canvas')
  let video = document.querySelector('video')
  let ctx = canvas.getContext('2d')
  let i = undefined
  video.addEventListener('play', function() {
    i = window.setInterval(function() {
      ctx.drawImage(video, 0, 0, 270, 135)
    }, 20);
  }, false);
  video.addEventListener('pause', function() {
    window.clearInterval(i);
  }, false);
  video.addEventListener('ended', function() {
    clearInterval(i);
  }, false);
</script>

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress