Jquery .live() not working with HTML5 Video Events

Question

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.

Answer 1

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.