Видео HTML5 - Полное заполнение файла?

Мне нужно определить, когда видеофайлы завершили загрузку. Я думаю, что я должен использовать progress- > buffer, но в глубине души я помню, что читал, что это ненадежно. Есть ли лучший способ, или это безопасно?

Обратите внимание: я буду хранить кеш-память localStorage, полностью загруженную каждым пользователем, поэтому я буду знать заранее, если видео уже загружено, и, возможно, может обойтись в буфере прогресса- > , если это точка приклеивания.

Ответы

Ответ 1

Вы можете связать "буферизованное" событие, но (по крайней мере, в Chrome) это работает отлично, за исключением того, что он не вызывает последнее "буферизованное" событие (то есть он обнаружит 90%... 94%... 98%... но не будет называть 100%).

Примечание: последние версии jQuery должны использовать .prop() вместо .attr()

Чтобы обойти это, я использовал setInterval() для проверки буфера каждые 500 мс (где $html5Video - ваш элемент <video>:

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

Ответ 2

У меня была такая же проблема, и я использовал таймер, прикрепленный к событию прогресса. Это взломать, но я не видел других способов сделать это. (Я тестировал это на Chome 10 - Windows).

var video = document.getElementById('#example-video-element');
var timer = 0;
video.addEventListener('progress', function (e) {
    if (this.buffered.length > 0) {

        if (timer != 0) {
            clearTimeout(timer);
        }

        timer = setTimeout(function () {            
            if(parseInt(video.buffered.end() / video.duration * 100) == 100) {
                // video has loaded.... 
            };          
        }, 1500);

    }
}, false);

Это похоже на тип подхода, о котором вы думали, но предположил, что отправлю пример для анонимных пользователей, которые могут искать быстрый пример кода = p
GJ