canvas绘制video

html

<video style="position: relative;  object-fit: fill;"  preload="auto" id="video1" playsinline="" x-webkit-airplay="" webkit-playsinline="" x5-video-player-type="h5"  src="video/H5.mp4"></video>
<canvas id="myCanvas" width="200" height="200"></canvas>

css

canvas{width: 100%;height: 100%;}
video{display: none}

js

var timer=null;
var video=document.getElementById('video1');
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth*2;  //获取屏幕宽度作为canvas的宽度  这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）
canvas.height = window.innerHeight*2;
function draw1() {
   video.play();
    timer = setInterval(function(){
      if(video.currentTime >=3.8){   //视频时间在3.8s时停止
         video.pause();
         clearInterval(timer);
      };
      context.drawImage(video, 0, 0, canvas.width, canvas.height);//绘制视频
   },16);
};
draw1()