Доступ к событию видео 5 HTML с событием jQuery

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

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

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

            });

Спасибо заранее,

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

С уважением Алекс

Ответ 3

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

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

Ответ 4

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

У вас есть:

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

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

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

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