ビデオの後にビデオを処理するのは、JavaScriptでバッファされます。

Question

正確には、ビデオがバッファされた後に私のWEBAPPビデオを処理する必要があります。 はグーグルを通して、私は次のようになりevent handlerをバッファリングするため見つかりました

video.onwaiting = function(){ 
    $(".buffering").show(); 
}; 

buffereing要素はビデオをバッファリングする必要があるときに表示されるローダーです。

これで5秒間バッファリングした後にビデオを処理する必要があるので、$("buffering").hide();を使用してbufferingを非表示にすることができます。

これまでのところ、私がやっている：

video.addEventListener('progress', function() { 
    var range = 0; 
    var bf = this.buffered; 
    var time = this.currentTime; 

    while(!(bf.start(range) <= time && time <= bf.end(range))) { 
     range += 1; 
    } 
    var loadStartPercentage = bf.start(range)/this.duration; 
    var loadEndPercentage = bf.end(range)/this.duration; 
    var loadPercentage = loadEndPercentage - loadStartPercentage; 
    val = loadPercentage*100; 
}); 

をあなたは、なぜ私はこのエラーを取得していている場合：

IndexSizeError: Index or size is negative or greater than the allowed amount on line while();

誰かがどのように扱うか私に言うことができるのであれば、私は本当に感謝5秒後にビデオがバッファリングされます。

よろしく:)

Answer 1

最初progressイベントで、bufferedによって返さなtimeRangeは空です。その開始または終了を要求すると、IndexSizeエラーがスローされます。

また、TimeRanges.startとTimeRanges.endにパラメータが必要なTIMERANGEの指標である、それはあなたがあなたのwhileループの代わりに使用することができ、0を下回るとTimeRanges.lengthを超えることはできません。

video.addEventListener('progress', function() { 
 
    var bf = this.buffered; 
 
    var time = this.currentTime; 
 
    if(!bf.length){ 
 
     return; 
 
     } 
 
    var loadStartPercentage = bf.start(0)/this.duration; 
 
    var loadEndPercentage = bf.end(bf.length-1)/this.duration; 
 
    var loadPercentage = loadEndPercentage - loadStartPercentage; 
 
    var val = loadPercentage*100; 
 
    console.log(val); 
 
});

<video id="video" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4" muted="true" controls></video>