x
<html><body><h1>HTML5 Canvas</h1><h2>The drawImage() Method</h2><p>Video to use:</p><video id="video1" controls width="270" autoplay> <source src="mov_bbb.mp4" type='video/mp4'> <source src="mov_bbb.ogg" type='video/ogg'> <source src="mov_bbb.webm" type='video/webm'></video><p>Canvas (the code draws the current frame of the video every 500 millisecond):</p><canvas id="myCanvas" width="270" height="135" style="border:1px solid grey"></canvas><script>const video = document.getElementById("video1");const canvas = document.getElementById("myCanvas");ctx = canvas.getContext("2d");video.addEventListener("play", function() {var i = window.setInterval(function() {ctx.drawImage(video,5,5,260,125)},500);}, false);video.addEventListener("pause", function() {window.clearInterval(i);}, false);video.addEventListener("ended", function() {clearInterval(i);}, false); </script></body></html>