主页
HTML 参考手册
HTML canvas drawImage() 方法
tryhtml5_canvas_drawimage_video
运行 ❯
×
更改方向
保存代码
更改主题
<!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="/demo/video/mov_bbb.mp4" type='video/mp4'> <source src="/demo/video/mov_bbb.ogg" type='video/ogg'> <source src="/demo/video/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 v = document.getElementById("video1"); const canvas = document.getElementById("myCanvas"); ctx = canvas.getContext('2d'); v.addEventListener('play',function() {var i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false); v.addEventListener('pause',function() {window.clearInterval(i);},false); v.addEventListener('ended',function() {clearInterval(i);},false); </script> </body> </html>