2

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.

slinkhi
  • 947
  • 4
  • 16
  • 32
  • 1
    argh,okay. I did some more searching and I found another SO post with an answer that seems to work for me http://stackoverflow.com/questions/11291651/why-dont-audio-and-video-events-bubble – slinkhi Sep 01 '15 at 15:44

0 Answers0