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()