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

Solution 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?

Solution 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

Solution 3

Use the originalEvent:

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

Comments

[jeffreynolte]

Thank you for your reply. when using the code above I receive the error "$(vid).addEventListener is not a function" in console.

[jeffreynolte]

Still no good, the link you posted I checked out earlier today and the "ended" and "durationchange" events work with no problems. "progress" unfortunately does not.

[RobertPitt]

What browser are you using, and are you sure that your using the <DOCTYPE html> for HTML Namespaces ?