CODEWITHSUNDEEP
jqueryhtmlvideolive
Nico
Nico

Reputation: 61

Jquery .live() not working with HTML5 Video Events

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.

Upvotes: 6

Views: 1447

Answers (2)

Cat Chen
Cat Chen

Reputation: 2416

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.

Upvotes: 6

partkyle
partkyle

Reputation: 1458

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.

Upvotes: 0

Related Questions