Кто-нибудь знает, какое событие или свойство мне нужно запросить, чтобы получить процентный показатель количества загруженного видео HTML5? Я хочу нарисовать "загруженный" бар в стиле CSS, который представляет эту цифру. Так же, как You Tube или любой другой видеоплеер.
Так же, как и вы, видеозапись будет воспроизводиться, даже если все видео не загрузится и дать пользователю отзыв о том, сколько видео загружено и осталось загрузить.
Как и Red Bar на YouTube:
Событие 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;
...
});
Другие тэнеры не работали для меня, поэтому я начал копаться в этой проблеме, и это то, что я придумал. В решениях используется 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();
}
);
Я надеюсь, что это поможет и другим людям.
Процент исправления для загруженной строки.. Выведите что-то вроде 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
});
}