Видео HTML5 - Процент загружен?

Ответ 1

Событие progress запускается, когда некоторые данные загружены, до трех раз в секунду. Браузер предоставляет список диапазонов доступных носителей через buffered свойство; подробное руководство по этому вопросу доступно на Буферизация, поиск и временные интервалы мультимедиа на MDN.

Запуск с одной загрузкой

Если пользователь не пропустит видео, файл будет загружен в один TimeRange, а свойство buffered будет иметь один диапазон:

------------------------------------------------------
|=============|                                      |
------------------------------------------------------
0             5                                      21
|             \_ this.buffered.end(0)
|
\_ this.buffered.start(0)

Чтобы узнать, насколько большой этот диапазон, прочитайте его следующим образом:

video.addEventListener('progress', function() {
    var loadedPercentage = this.buffered.end(0) / this.duration;
    ...
    // suggestion: don't use this, use what below
});

Запуск с несколькими загрузками

Если пользователь изменяет позицию воспроизведения во время загрузки, может быть запущен новый запрос. Это приводит к фрагментации свойства buffered:

------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  1           5                    15          19    21
  |           |                    |            \_ this.buffered.end(1)
  |           |                     \_ this.buffered.start(1)
  |            \_ this.buffered.end(0)
   \_ this.buffered.start(0)

Обратите внимание, как изменяется номер буфера.

Так как он больше не является смежным, "процент загружен" больше не имеет большого смысла. Вы хотите знать, что такое текущий TimeRange и сколько его загружено. В этом примере вы получите место, где нагрузка должна быть начать (так как это не 0) и где она должна закончиться.

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;
    ...
});

Ответ 2

Другие тэнеры не работали для меня, поэтому я начал копаться в этой проблеме, и это то, что я придумал. В решениях используется jquery для создания панели прогресса.

function loaded()
{
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);

    $("#progressB").progressbar({value: (end/total)*100});      
}   

$('#videoID').bind('progress', function() 
{
    loaded();
}
);

Я надеюсь, что это поможет и другим людям.

Ответ 3

Процент исправления для загруженной строки.. Выведите что-то вроде 99% загруженного внутри элемента #loaded...

function loaded() {
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);
    var newValue = (end/total)*100;
    var loader = newValue.toString().split(".");

    $('#loaded').html(loader[0]+' loaded...');

    $("#progress").progressbar({
        value: newValue     
    });    
}