Доступ к событию прогресса видео HTML 5 с помощью jQuery

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

мой партнер и я были в тупике в течение очень большой части дня по этому вопросу и надеюсь, что кто-то может дать некоторое представление по этому вопросу. Мы смогли получить доступ к событию прогресса с помощью простого 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

11
html5 html5-video javascript jquery

4 ответов

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

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

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

посмотреть здесь

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

5

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

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

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

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

с уважением Алекс!--1-->

2

используйте originalEvent:

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

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

у вас есть:

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

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

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

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