6

I'm having trouble interacting with the ended event of an HTML5 video. The problem is that the tag is dynamically added to the page using a lightbox-clone plugin, and I can't use bind to get the ended event. Tried using live() but that didn't work either. I can certainly use "click" as an event, but neither play, pause nor ended will work. Tried delegate, but that didn't do the trick.

The code looks something like this (I used a solution posted elsewhere on Stackoverflow):

$("video").live("play", function() {
    alert("It moves!");
});

Using bind has the desired effect, but it doesn't affect the video tag inside the popup container. The HTML is a standard <video> tag wrapped in a div, but if you need it I can include it.

Can anyone think of a workaround for this, or it simply can't be done? I'm quite a newbie with Jquery, so I might be missing something obvious here. I'm using an old version of Jquery (1.3.2) but also tested on 1.6.1 with no results.

Nico
  • 61
  • 2
  • is play even an "official" event? – ave4496 Jun 07 '11 at 23:44
  • It is according to w3c specifications: http://www.w3.org/TR/html5/video.html#event-media-play, and it does work on bind (it triggers when the play button is pressed) – Nico Jun 07 '11 at 23:47
  • You may find the answer here: http://stackoverflow.com/questions/11291651/why-dont-audio-and-video-events-bubble – T. Junghans Jan 27 '13 at 21:21

2 Answers2

6

I think live method relies on event bubbling. Only events that bubbles can be captured by live method. There's no standard saying that video tag events should bubble, so I think browsers implement these events in a non-bubbling way. That means you have to bind each video element you create.

Cat Chen
  • 2,387
  • 17
  • 12
0

Can you use the delegate method instead? I find that more reliable than live. You can even just use the body tag as the reference.

$('body').delegate('video','play',function() {
    alert('it moves!');
});

I put together a super trivial example on jsfiddle and it seemed to work, although it's not really a full video tag...

Edit: after further thought, this example was not good at all - even custom events get fired when they are triggered by jquery.

partkyle
  • 1,458
  • 1
  • 15
  • 25
  • Sorry, that's not working for me... Although it does look like it should. Maybe there's something else to my code that I'm not including and it's necessary to pinpoint the issue? I'll look into this. Thanks for your answer partkyle! – Nico Jun 08 '11 at 00:17
  • If I use trigger to launch the event, like you did on the example, your code does work. But it doesn't get the event when it's triggered by the video player. Does that make sense? – Nico Jun 08 '11 at 00:30
  • Yeah - that makes perfect sense. Even custom events get fired if you trigger it. My mistake. – partkyle Jun 08 '11 at 01:42