Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <body> <h1>HTML5 Canvas</h1> <h2>La méthode drawImage()</h2> <p>Vidéo à utiliser :</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 (le code dessine la trame actuelle de la vidéo toutes les 500 millisecondes) :</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>