html5 video - 動的にロードされたビデオでprogressイベントを使用する

Question

'progress'イベントを使用してビデオが100％ロードされているかどうかを確認するのに少し難しいです。 Chrome/Safariでのみ動作するようです。 Firefoxは、私がそれを再生しようとしない限り、ビデオを「プリロード」したくないようです。ここで

は私のhtmlです：ここでは

<div id="control"> 
    <a data-video="video/transport/1.0.webm">video1</a> 
    <a data-video="video/transport/2.0.webm">video2</a> 
    <a data-video="video/transport/3.0.webm">video3</a> 
    <a data-video="video/transport/4.0.webm">video3</a> 
    <a data-video="video/transport/5.0.webm">video3</a> 
</div> 

<video id="video" width="960" height="500" type="video/webm" autobuffer></video> 

は私のjs（chrome html5 video buffered.end eventから借りコード）である：

$(function(){ 

    var vid = document.getElementById('video'); 

    vid.addEventListener('progress', onProgress, false); 

    $('#control a').click(function(){ 
     vid.src = $(this).attr('data-video'); 
     vid.load(); 
    }); 

}); 

function onProgress(e){ 

    var vid = document.getElementById('video'); 
    var percent = null; 

    if (vid.buffered.length > 0 && vid.buffered.end && vid.duration) { 
     percent = vid.buffered.end(0)/vid.duration; 
    } else if (vid.bytesTotal != undefined && vid.bytesTotal > 0 && vid.bufferedBytes != undefined) { 
     percent = vid.bufferedBytes/vid.bytesTotal; 
    } 

    if (percent !== null) { 
     percent = 100 * Math.min(1, Math.max(0, percent)); 

     console.log(percent); 
    } 

} 

Answer 1

チェックこの議論：HTML5 Video - File Loading Complete Event?

var videoDuration = $html5Video.attr('duration'); 

var updateProgressBar = function(){ 
if ($html5Video.attr('readyState')) { 
    var buffered = $html5Video.attr("buffered").end(0); 
    var percent = 100 * buffered/videoDuration; 

    //Your code here 

    //If finished buffering buffering quit calling it 
    if (buffered >= videoDuration) { 
      clearInterval(this.watchBuffer); 
    } 
} 
}; 
var watchBuffer = setInterval(updateProgressBar, 500);