Drawing Video

HTML5 canvas demos

by Dan Wahlin

HTML

Video:
<br />
<video id="video" controls="true" width="270" height="200" 
       autoplay="true">
  <source 
    src="http://dl.dropbox.com/u/6037348/HTML5AndJavaScript/RealSteel.mp4"   
    type='video/mp4' />
</video>
<br />
Canvas:
<br />
<canvas id="myCanvas" width="270" height="200" />

JavaScript

var timerID;
$(document).ready(function() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d'); 
        
    var video = document.getElementById('video');
    video.addEventListener('play', function() {
        video.currentTime= 10.0;
        timerID = window.setInterval(function() { 
            ctx.drawImage(video, 5 , 5, 270, 125);
        }, 30);
    });
        
    video.addEventListener('pause', function() {
       stopTimer();
    });
        
    video.addEventListener('ended', function() {
       stopTimer();
    });   
});
    
function stopTimer() {
    window.clearInterval(timerID);  
}