views:

574

answers:

5

Hello All,

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

+1  A: 

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

http://stackoverflow.com/questions/2954595/html5-video-callbacks/2954618#2954618

RobertPitt
Thank you for your reply. when using the code above I receive the error "$(vid).addEventListener is not a function" in console.
jnolte
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.
jnolte
What browser are you using, and are you sure that your using the <DOCTYPE html> for HTML Namespaces ?
RobertPitt
Using Safari / Firefox. DOCTYPE is all good.
jnolte
A: 

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(...
Ken Redler
+1  A: 

Hi,

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

alexander farkas
A: 

Use the originalEvent:

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