Доступ к Событию Прогресса Видео 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
4 ответа
Почему бы просто не использовать:
$('video#test-vid').bind("progress",function(e){
console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );
});
Это должно работать, jQuery должен связывать события
Взгляните сюда
Несколько диких предположений...
У вас есть:
var vid = $('#test-vid');
$(vid).bind(...
Во второй строке vid уже является объектом jQuery. Вы пробовали просто использовать vid.bind()?
Или же, если вы знаете, что addEventListener работает, почему бы не использовать его? Возможно, вам повезет, если после выделения с помощью jQuery вы выделите недекорированный объект DOM:
var vid = $('#test-vid');
vid.get().addEventListener(...
вы получите undefined, потому что jQuery использует белый список свойств событий для нормализации событий, ни загруженных, ни итоговых нет в этом списке.
Если вы хотите получить информацию, вы должны использовать: e.originalEvent.lengthComputable и т. Д.
Но, честно говоря, вам не следует этого делать. Свойства этого события относятся только к firefox и больше не являются частью спецификации html5. Вы должны использовать буферизованный объект в других браузерах. В медиаэлементах html5 действительно проблематично продвигаться вперед. Safari на iPad работает иначе, чем Safari на Mac и так далее.
кроссбраузерную реализацию события прогресса можно найти в jMediaelement-libary: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312
с уважением Алексей
Использовать исходное событие:
if(e.originalEvent.lengthComputable && e.originalEvent.total){
var loaded = e.originalEvent.loaded / e.originalEvent.total * 100;
}