Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <title>CANVAS - Image - Video tag</title> <script> function crtaj() { var can = document.getElementById('kan1'); if (can.getContext){ var ctx = can.getContext('2d'); var vid = document.getElementById('vid1'); vid.addEventListener("canplay", function() { ctx.drawImage(vid, 100,50); }); } } window.onload=crtaj; </script> </head> <body> <video src="../slike/mov_bbb.mp4" id="vid1" controls>Vaš browser ne podržava VIDEO element!</video> <br clear="all"> <br>Frame gornjeg videa učitan je u CANVAS pomoću <b>getElementById()</b> metode. <br>Obavezna je upotreba <b>canplay</b> eventa. <br> <br> <canvas id="kan1" width="500" height="300" style="border:1px solid #AAAAAA;background:#DDDDDD;"> Vaš browser ne podržava CANVAS element! </canvas> <br><br> </body> </html>
Pregled stranice:
Pogledaj stranicu
../html/html5canvas/primjeri/36img_video_tag.html
.