обработка видео после видео буферируется в 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 событии, TimeRanges возвращаемого buffered пусто. Поэтому запрос на его начало или конец вызовет ошибку IndexSize.

Кроме того, параметр TimeRanges.start и TimeRanges.end является показателем требуемой TimeRange, она не может быть ниже 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>