Доступ к HTML 5 Video Progress Event с помощью jQuery

Question

Ниже приведено событие для видеоплеера HTML5.

Мой партнер и я были озадачены в течение очень большой части дня по этому вопросу и надеемся, что кто-нибудь сможет дать некоторое представление о проблеме. Мы смогли получить доступ к событию progress с простым js, как показано ниже, но при попытке доступа к нему с помощью jQuery в консоли получается неопределенное значение. Любая помощь / рекомендации с благодарностью.

    //JS - Works like a charm
document.addEventListener("DOMContentLoaded", init, false);
function init() {
    var v = document.getElementById('test-vid');
    console.log(v)
    v.addEventListener('progress', progress, false);
}
function progress(e) {
    console.log(e.lengthComputable + ' ' + e.total + ' ' + e.loaded);
}


    //  jQuery - NO BUENO - Undefined rendered in console
    var vid = $('#test-vid');
    $(vid).bind("progress", function(e){
            console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );

            });

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

JN

Answer 1

Почему бы просто не использовать:

    $('video#test-vid').bind("progress",function(e){
        console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );
    });

Это должно работать, jQuery должен связывать события

Взгляните сюда

HTML5 обратные вызовы?

Answer 2

вы получаете неопределенное значение, потому что jQuery использует белый список свойств событий, чтобы нормализовать события, в которых нет ни загруженных, ни итоговых значений.

Если вы хотите получить информацию, вы должны использовать: e.originalEvent.lengthComputable и т.д ..

Но, честно говоря, вы не должны этого делать.Свойства этого события относятся только к Firefox и больше не являются частью спецификации html5.Вы должны использовать буферизованный объект в других браузерах.Прогресс действительно проблематичен в html5 медиаэлементах.safari на iPad работает не так, как safari на Mac и т. д.

кросс-браузерная реализация progress-события может быть найдена в jMediaelement-libary: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312

относительно alex

Answer 3

Использовать originalEvent:

if(e.originalEvent.lengthComputable && e.originalEvent.total){
     var loaded = e.originalEvent.loaded / e.originalEvent.total * 100;
}

Answer 4

Несколько диких догадок ...

У вас есть:

var vid = $('#test-vid');
$(vid).bind(...

Во второй строке vid уже является объектом jQuery. Вы пробовали просто использовать vid.bind()?

В качестве альтернативы, если вы знаете, addEventListener работает, почему бы не использовать его? Может быть, вам повезет, если после выбора с помощью jQuery вы создадите недекорированный объект DOM:

var vid = $('#test-vid');
vid.get().addEventListener(...