Accessing HTML 5 Video Progress Event with jQuery

Question

The below is for an HTML5 video player event.

My partner and I have been stumped for a very large portion of the day on this issue and hope someone can lend some insight on the issue. We have been able to access the progress event with plain js as seen below but when trying to access this with jQuery we get undefined in console. Any help/ recommendations are greatly appreciated.

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

            });

Thanks in advance,

JN

Answer 1

Why not just use:

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

This should work, jQuery should bind the events

Take a look here

HTML5 <video> callbacks?

Answer 2

you get an undefined because jQuery uses a whitelist of event-properties, to normalize events, neither loaded nor total is in this list.

If you want to get the information, you have to use: e.originalEvent.lengthComputable etc..

But honestly you shouldn't do this. This event properties are firefox only and aren't part of the html5 spec anymore. You have to use the buffered object in other browsers. The progress-thing is really problematic in html5 mediaelements. safari on iPad works different from safari on mac and so on.

a cross-browser implementation of a progress-event can be found in the jMediaelement-libary: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312

regards alex

Answer 3

Use the originalEvent:

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

Answer 4

A few wild guesses...

You have:

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

On that second line, vid is already a jQuery object. Have you tried simply using vid.bind()?

Alternatively, if you know addEventListener works, why not use it? Maybe you'll have luck if, after selecting with jQuery, you emit the undecorated DOM object:

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