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>

我试图通过缩放画布来获取全屏视频，但上面的代码仅适用于Chrome。该视频不会出现在firefox 10.0.2和safari 5.05中。我尝试了三个不同的文件：mp4，ogv和webm。我的代码出了什么问题。我知道有一个标签，但是我可以像使用画布一样缩放它吗？

Answer 1

某些实施适用于所有当前支持HTML5的浏览器，包括Firefox，Safari和Chrome（基于新的FullScreen API）：

我的视频实现在firefox和safari中不起作用;只有铬

1 个答案: