我的视频实现无法在Firefox和Safari浏览器中使用；仅镀铬

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. 我试图通过放大画布来获得全屏视频，但是上面的代码仅在Chrome中有效。 The video does not show up in firefox 10.0.2 nor safari 5.05. 该视频无法在Firefox 10.0.2和Safari 5.05中显示。 I tried three different files: mp4,ogv, and webm. 我尝试了三个不同的文件：mp4，ogv和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): 一些实现可与所有当前支持HTML5的浏览器一起使用，包括Firefox，Safari和Chrome（基于新的FullScreen API）：

我的视频实现无法在Firefox和Safari浏览器中使用；仅镀铬

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-03-04 18:50:32

我的视频实现无法在Firefox和Safari浏览器中使用； 仅镀铬

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-03-04 18:50:32

我的视频实现无法在Firefox和Safari浏览器中使用；仅镀铬

解决方案1
1 已采纳 2012-03-04 18:50:32