Internet explorer 9 problems with drawing video on canvs HTML5

I'm drawing video on canvas and it works in opera, mozilla 开发者_运维问答and chrome but in IE9 canvas is blank but video is playing. Here is javascript that I'm using: code

Thanks for your help

You probably should sync the playing event rather than the play event. If you try to access a video before any frames are loaded, you'll get a null reference. The play event fires when playback is requested. The playing event fires when playback actually begins.

You also might want to move your getContext call to AFTER where you've resized the canvas.

The code below seems to work for me. The only change is the setTimeout function call needs to have a wrapper in order to pass the parameters correctly in IE. The demos at http://html5doctor.com/video-canvas-magic/ seem to work fine with this change.

document.addEventListener('DOMContentLoaded', function () {
    var v = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth);
    var ch = Math.floor(canvas.clientHeight);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function () {
        draw(this, context, cw, ch);
    }, false);

}, false);

function draw(v, c, w, h) {
    if (v.paused || v.ended) return false;
    c.drawImage(v, 0, 0, w, h);
    setTimeout(function(){ draw(v, c, w, h) }, 20);
}​