Доступ к 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

javascript jquery html html5-video

12

jeffreynolte 8 Июн 2010 в 07:59

Answer 1

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

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

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

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

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

5

Community 23 Май 2017 в 12:16

Answer 2

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

У тебя есть:

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

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

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

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

0

Ken Redler 8 Июн 2010 в 04:25

Answer 3

Вы получаете неопределенное значение, потому что 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

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

2

alexander farkas 22 Июн 2010 в 21:11

Answer 4

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

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

1

Tom 25 Авг 2010 в 16:32

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

4 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript