Html5 video - использование события прогресса с динамически загружаемыми видеороликами

75
4

У меня возникли трудности с использованием события "progress", чтобы проверить, загружено ли видео на 100%. Он работает только в Chrome/Safari. Firefox, похоже, не хочет "предварительно загружать" видео, если я не попытаюсь воспроизвести его.


Вот мой html:


<div id="control">
<a data-video="video/transport/1.0.webm">video1</a>
<a data-video="video/transport/2.0.webm">video2</a>
<a data-video="video/transport/3.0.webm">video3</a>
<a data-video="video/transport/4.0.webm">video3</a>
<a data-video="video/transport/5.0.webm">video3</a>
</div>

<video id="video" width="960" height="500" type="video/webm" autobuffer></video>


Вот мой js (код, заимствованный из chrome html5 video buffered.end event):


$(function(){

var vid = document.getElementById('video');

vid.addEventListener('progress', onProgress, false);

$('#control a').click(function(){
vid.src = $(this).attr('data-video');
vid.load();
});

});

function onProgress(e){

var vid = document.getElementById('video');
var percent = null;

if (vid.buffered.length > 0 && vid.buffered.end && vid.duration) {
percent = vid.buffered.end(0) / vid.duration;
} else if (vid.bytesTotal != undefined && vid.bytesTotal > 0 && vid.bufferedBytes != undefined) {
percent = vid.bufferedBytes / vid.bytesTotal;
}

if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));

console.log(percent);
}

}

спросил(а) 2021-01-19T16:14:32+03:00 2 месяца, 3 недели назад
1
Решение
86

проверить это обсуждение: Видео HTML5 - Полное заполнение файла Загрузка?

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
if ($html5Video.attr('readyState')) {
var buffered = $html5Video.attr("buffered").end(0);
var percent = 100 * buffered / videoDuration;

//Your code here

//If finished buffering buffering quit calling it
if (buffered >= videoDuration) {
clearInterval(this.watchBuffer);
}
}
};
var watchBuffer = setInterval(updateProgressBar, 500);

ответил(а) 2021-01-19T16:14:32+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема