I have an html5 video that I'm trying to hook events to (e.g. play, pause) using jQuery (1.11.1). However, I can't seem to get it to work.
On my page with the video, I first put the following into the js console:
$('body').on('pause','video#videoTag',
function(e) {
console.group('(on) Video: pause');
console.log('e: ',e);
console.log('this: ',this);
console.groupEnd();
});
And in the js console, it returns an object like this:
Object[body#videoOverlay.modal-frame]
This isn't right, and it is not triggered on pause.
Then I put this into the js console:
$('body').delegate('video#videoTag','pause',
function(e) {
console.group('(delegate) Video: pause');
console.log('e: ',e);
console.log('this: ',this);
console.groupEnd();
});
The same thing as before is returned, and again, no pause event triggered.
However, if I put this into the js console, it works:
$('video#videoTag').on('pause',
function(e) {
console.group('(direct) Video: pause');
console.log('e: ',e);
console.log('this: ',this);
console.groupEnd();
});
This returns
Object[video#videoTag]
and the pause event triggers and I see my console log stuff.
So my question is.. why don't the first two work? Do delegated event handlers just not work for html video elements?
Update: I also tried it with other video events: play,timeupdate,ended,stop and it doesn't work for any of them either, unless I do it directly like last example.