прогресс загрузки html5-видео работает только на firefox

Question

У меня есть следующая функция для расчета хода загрузки видео (довольно часто):

function updateProgressBar (video) {
   if (video.buffered.length > 0) {
       var percent = (video.buffered.end(0) / video.duration) * 100;
       $('#loading').css({'width': percent + '%'});
       console.log(percent);
       if (percent == 100) {
           console.log('video loaded!');
           //everything is loaded, do something.
           $(video).unbind('loadeddata canplaythrough playing'); //prevents the repetition of the callback
       }
   }        
}

... привязано к событию progress (и некоторым другим как мера безопасности) внутри функции $ (document) .ready:

var videoTest = document.getElementById("videoTest");

$('#videoTest').bind('progress', function () {
     updateProgressBar (videoTest);
});

$('#videoTest').bind('loadeddata', function () {
     updateProgressBar (videoTest);
});

$('#videoTest').bind('canplaythrough', function () {
     updateProgressBar (videoTest);
});

$('#videoTest').bind('playing', function () {
     updateProgressBar (videoTest);
});

Вы можете посмотреть живой пример здесь: http://www.hidden -workshop.com / video /

Как вы можете видеть, все это хорошо работает в Firefox, но в остальных браузерах переменная '% процентов' никогда не достигает значения '100', как ожидалось; функция всегда останавливается на 90 ~, и поэтому я не могу знать, когда видео закончилось загрузка (жизненно важно для того, что я пытаюсь сделать).

Это похоже на то, что событие «progress» перестает работать, прежде чем я могу получить окончательное значение «процентов», потому что если вы нажмете кнопку «воспроизведения», событие «воспроизведения» сработает, а затем успешно вычислит и прочитает «проценты». последнее значение переменной (равное 100).

Я что-то упустил или это общая проблема? Есть ли какое-нибудь решение, которое я мог бы использовать?

Заранее спасибо!

Answer 1

var videoElement = null; //TODO set reference to video element

var checkVideoLoadingProgressTimerDelay = 50;
var checkVideoLoadingProgressTimerID = -1;

function getVideoLoadingProgress(){
    var end = 0;
    if(videoElement.buffered.length >= 1){
        end = videoElement.buffered.end(0);
    }
    var progress = end / videoElement.duration;
    progress = isNaN(progress) ? 0 : progress;
    return progress;
};

function startCheckVideoLoadingProgressTimer(){
    checkVideoLoadingProgressTimerID = 
        setTimeout(checkVideoLoadingProgressTimerHandler, checkVideoLoadingProgressTimerDelay);
};

function checkVideoLoadingProgressTimerHandler(){
    var progress = getVideoLoadingProgress();
    //TODO update progress bar
    if(progress < 1){
        startCheckVideoLoadingProgressTimer();
    }
};

Также значение «auto» для атрибута «preload» видео не гарантирует, что пользовательский агент загрузит все видео.