Run ❯
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <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(v,5,5,260,125)},500);}, false); video.addEventListener("pause", function() {window.clearInterval(i);}, false); video.addEventListener("ended", function() {clearInterval(i);}, false); </script> </body> </html>
