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

Answer 4

Мой ответ лучше, чем все остальные, потому что вы хотите обновить ход буфера, когда видео приостановлено. Это происходит с событием progress. Событие обновления времени срабатывает при сбое прогресса, как это иногда бывает.

      $("#video").on("timeupdate progress", function(){
    var video = document.getElementById("video");
    var vidDur = video.duration;
    for(var i = 0; i <= vidDur; i++){
        var totBuffX = video.buffered.end(i);
        var perBuff = totBuffX/vidDur*100;
        $("#xVidBuffX").css("width", perBuff+"%");
    }
});

вам нужен только video.buffered.end(i).

Answer 5

Я думаю, что лучшее событие для обновления буферизованного индикатора выполнения - timeupdate. всякий раз, когда обновляется время медиа, запускается событие.

Он дает буферизованное свойство, которое мы можем использовать следующим образом

audio.addEventListener('timeupdate', function () {
    if (this.duration) {
         let range = 0;
         let bf = this.buffered;
         let time = this.currentTime;

         while (!(bf.start(range) <= time && time <= bf.end(range))) {
            range += 1;
         }
         let loadStartPercentage = bf.start(range) / this.duration;
         let loadEndPercentage = bf.end(range) / this.duration;
         let loadPercentage = (loadEndPercentage - loadStartPercentage) * 100;
         //Update your progressbar DOM here
    }
});

Лучшим преимуществом этого события является то, что оно запускается при воспроизведении медиа. В то время как событие progress запускается, когда медиа загружается и уведомляется браузером.

Так же, как и на YouTube, процент буферизации может отображаться только при воспроизведении мультимедиа.