Acceso al evento de progreso de video HTML 5 con jQuery

Question

A continuación, se detalla un evento de reproductor de video HTML5.

Mi compañero y yo hemos estado perplejos una gran parte del día sobre este tema y esperamos que alguien pueda aportar algo de información sobre el tema. Hemos podido acceder al evento de progreso con js simples como se ve a continuación, pero cuando intentamos acceder a esto con jQuery nos quedamos sin definir en la consola. Cualquier ayuda/recomendaciones son muy apreciadas.

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

      }); 

Gracias de antemano,

JN

Answer 1

Por qué no sólo tiene que utilizar:

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

esto debería funcionar, jQuery debe enlazar los eventos

miren aquí

HTML5 <video> callbacks?

Answer 2

Unos salvajes conjeturas ...

tiene:

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

En esa segunda línea, vid ya es un objeto jQuery. ¿Has intentado simplemente usar vid.bind()?

Alternativamente, si conoce addEventListener funciona, ¿por qué no usarlo? Quizás tengas suerte si, después de haber seleccionado con jQuery, emites el objeto DOM sin decorar:

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

Answer 3

se obtiene una indefinida porque jQuery utiliza una lista blanca de eventos-propiedades, para normalizar los eventos, no se carga ni total está en esta lista.

Si desea obtener la información, usted tiene que utilizar: e.originalEvent.lengthComputable etc ..

Pero honestamente que no debe hacer esto. Las propiedades de este evento son solo Firefox y ya no son parte de la especificación html5. Debe usar el objeto almacenado en otros navegadores. El progreso-cosa es realmente problemático en html5 elementos medievales. safari en iPad funciona de forma diferente a safari en mac, etc.

una aplicación a través del navegador de un evento Construcción están disponibles en el jMediaelement-libary: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312

respecto Alex

Answer 4

Usar la originalEvent:

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