My implementation of video doesn't work in firefox and safari; only chrome

Question

<!DOCTYPE html>
<html land="en">
<head>
<meta charset="utf-8">
<title>Using video in the canvas tag</title>
<script type="text/javascript">

    var vid,ctx;

    function init(){
        window.addEventListener("resize",onResize,false);

        var can = document.getElementById('canvas1');
        ctx = can.getContext('2d');

        vid = document.createElement('video');
        vid.src = 'video.mp4';
        vid.autoplay = true;
        vid.loop = true;
        vid.addEventListener("canplaythrough", play, false);

    }


    function play(){
        setInterval(function() {
            ctx.drawImage(vid, 0, 0);
        }, 1000/23.976);
    }

</script>

<style type="text/css">
    body{margin:0;}
</style>

</head>


<body onLoad="init();">
    <canvas id="canvas1" width="1280" height="720"></canvas>

</body>


</html>

Im trying to get full screen video by scaling the canvas up, however the code above only works in Chrome. The video does not show up in firefox 10.0.2 nor safari 5.05. I tried three different files: mp4,ogv, and webm. What's wrong with my code. I know there is a tag but can I scale it the same way I can with a canvas?

Answer 1

Some implementations working with all current HTML5 capable browsers including Firefox, Safari and Chrome (based on the new FullScreen API):

My implementation of video doesn't work in firefox and safari; only chrome

Question

1 answers

solution1
1 ACCPTED 2012-03-04 18:50:32

My implementation of video doesn't work in firefox and safari; only chrome

Question

1 answers

solution1 1 ACCPTED 2012-03-04 18:50:32

solution1
1 ACCPTED 2012-03-04 18:50:32