html 5キャンバスで使用されているビデオをプリロードする

ビデオをキャンバスで使用するためのコードが与えられましたが、ビデオをプリロードできるかどうかは疑問でした。完了したら完全にダウンロードして再生します。さらに良いことに、一定のパーセンテージ、たとえば80％で徐々にダウンロードすることはどうですか？html 5キャンバスで使用されているビデオをプリロードする

<!DOCTYPE html> 

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

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

     var vid = document.createElement('video'); 
     vid.src = 'http://upload.wikimedia.org/wikipedia/commons/8/8c/Anthropoides_paradisea1.ogg'; 
     vid.autoplay = true; 
     vid.loop = true; 

     setInterval(function() { 
      ctx.drawImage(vid, 0, 0); 
     }, 60); 
    } 
</script> 

</head> 


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

</body> 


</html>

出典

2012-03-02 Adam

ああ、私は同じコンセプトに興味がありますが、代わりに音楽ファイルが必要です！ – kand

私はあなたがcanplaythroughイベントに興味があると信じています。これは十分なように見えるときに起動し、現在のレートで再生すると、再生が完了する前に完全に読み込まれます。

var vid, ctx; 

function play() { 
    vid.play(); 
    setInterval(function() { 
     ctx.drawImage(vid, 0, 0); 
    }, 60); 
} 

function init() { 
    var can = document.getElementById('canvas1'); 
    ctx = can.getContext('2d'); 
    vid = document.createElement('video'); 
    vid.src = "http://upload.wikimedia.org/wikipedia/commons/8/8c/Anthropoides_paradisea1.ogg"; 
    vid.autoplay = false; 
    vid.loop = true; 
    vid.addEventListener("canplaythrough", play, false); 
}

Example jsFiddle

これは、すべての異なるメディア要素イベントのハンドルを取得するための優れたリソースです

： http://www.w3.org/2010/05/video/mediaevents.html。

出典

2012-03-02 21:09:11 nwellcome

html 5キャンバスで使用されているビデオをプリロードする

答えて

関連する問題