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

Question

Кто-нибудь знает, какое событие или свойство мне нужно запросить, чтобы получить процентную долю от суммы, загруженной видео HTML5? Я хочу нарисовать «загруженную» панель в стиле CSS, ширина которой представляет эту фигуру. Так же, как You Tube или любой другой видеоплеер.

Так же, как вы просматриваете видео, видео будет воспроизводиться, даже если все видео не загружено, и сообщать пользователю о том, сколько видео загружено и осталось загрузить.

Как и красная полоса на YouTube:

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

Answer 2

Другие awnsers не работали для меня, поэтому я начал копаться в этой проблеме, и это то, что я придумал. Решения использует 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();
}
);

Надеюсь, это поможет и другим

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