Accesso all'evento di avanzamento video HTML 5 con jQuery

Question

Il seguente è per un evento di video player HTML5.

Il mio compagno e io siamo stati costretti a dedicare una parte molto importante della giornata a questo problema e speriamo che qualcuno possa dare qualche informazione sul problema. Siamo stati in grado di accedere all'evento progress con plain js come mostrato di seguito, ma quando proviamo ad accedere a questo con jQuery otteniamo un indefinito in console. Qualsiasi aiuto/consiglio è molto apprezzato.

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

      }); 

Grazie in anticipo,

JN

Answer 1

perché non utilizzare:

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

Questo dovrebbe funzionare, jQuery dovrebbe legare gli eventi

dare uno sguardo qui

HTML5 <video> callbacks?

Answer 2

A poche congetture selvagge ...

si dispone di:

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

In quella seconda linea, Vid è già un oggetto jQuery. Hai provato semplicemente a utilizzare vid.bind()?

In alternativa, se si conosce addEventListener, perché non utilizzarlo? Forse avrai fortuna se, dopo aver selezionato con jQuery, si emettono l'oggetto DOM non decorato:

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

Answer 3

si ottiene un indefinito perché jQuery utilizza una whitelist di evento-properties, di normalizzare gli eventi, nè caricato nè totale è in questa lista.

Se si desidera ottenere le informazioni, è necessario utilizzare: e.originalEvent.lengthComputable ecc ..

Ma onestamente, non si dovrebbe fare. Le proprietà di questo evento sono solo firefox e non fanno più parte della specifica html5. Devi usare l'oggetto bufferizzato in altri browser. Il progresso-cosa è davvero problematico in HTML5 elementi multimediali. safari su iPad funziona diversamente da Safari su Mac e così via.

un'implementazione cross-browser di un progresso-evento può essere trovato nel jMediaelement-libary: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312

riguarda alex

Answer 4

Utilizzare l'originalEvent:

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