CODEWITHSUNDEEP
javascripthtmlhtml5-video
Adam
Adam

Reputation: 9049

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

<!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?

Upvotes: 2

Views: 273

Answers (1)

Yahia
Yahia

Reputation: 70369

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

Upvotes: 1

Related Questions