私のビデオの実装は、FirefoxとSafariでは動作しません。クロムのみ

<!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という3つの異なるファイルを試しました。私のコードに何が問題なのですか？タグがあることは知っていますが、キャンバスでできるのと同じ方法でスケールできますか？私のビデオの実装は、FirefoxとSafariでは動作しません。クロムのみ

出典

2012-03-04 Adam

私のビデオの実装は、FirefoxとSafariでは動作しません。クロムのみ

答えて

関連する問題