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

Question

Ниже приведено событие для видеопроигрывателя 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

Answer 1

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

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

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

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

HTML5 <video> callbacks?

Answer 2

Несколько домыслы ...

У вас есть:

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

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

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