JQuery listen on video events

Question

Searched a lot on SO and google but nothing I have tried so far is working as intended. I am trying to catch video events with JQuery.

This is a slightly different case as I am tweaking an already existing divs html content from a regular image to a video.

I have the following div in html:

<div id="video" class="grid_cell"><img src="../assets/test.jpg" /></div>

And with JavaScript and JQuery I do the following to the div:

vidDiv.html('<video width="' + w + '" height="' + h + '" autoplay="autoplay">' +
                        '<source src="' + src + '" type="video/mp4"></source>' +
                        '</video>');

This works and replaces the image content with video content instead. However when I am trying to listen to the video's events I get nothing. See the following code I use for this:

vidDiv.bind('mouseleave ended', function(){
                    console.log("Event triggered!");
            });

Note I have tried on instead of bind to not success. And the element vidDiv is a JQuery object I fetch earlier. As the vidDiv.html(...) part works and changes the content to a video I know the connection is correct.

Also I put in the mouseleave event intentionally to see if any event would trigger and sure enough when leaving the div with the mouse it works. But when the video is finished playing I get no such event.

Any ideas?

EDIT:

I accepted the answer below which works but I also wanted to just put in here an alternative way to do it with pure JS and some JQuery:

vidDiv.html('<video width="' + w + '" height="' + h + '" autoplay="autoplay">' +
                        '<source src="' + src + '" type="' + type + '"></source>' +
                        '</video>');

            var elementId = vidDiv.attr("id");
            var elem = document.getElementById(elementId);
            elem.addEventListener('ended', function(e) { console.log("Video ended"); }, true);

Have you tried a library like [VideoJS](http://www.videojs.com/) or something? Video events are pretty hard to get right cross-browser. — ahren, Nov 18 '13 at 13:53
Media events will not bubble. You must bind directly. See Related: http://stackoverflow.com/questions/11291651/why-dont-audio-and-video-events-bubble — megawac, Nov 18 '13 at 13:57

score 1 · Accepted Answer · answered Nov 18 '13 at 14:00

1

Create proper elements with event handlers:

var fn = function() {
            console.log('Event triggered!')
    },
    video = $('<video />', {
        width    : w,
        height   : h,
        autoplay : 'autoplay',
        on       : {
            mouseleave: fn,
            ended     : fn
        }
    }),
    source = $('<source />', {
        src  : src,
        type : 'video/mp4'
    }
);

vidDiv.html( video.append(source) );

answered Nov 18 '13 at 14:00

adeneo

312,895
29
395
388

This works to some extend but the callback function won't trigger I get a really strange runtime error; the following: `Uncaught SyntaxError: Unexpected token (` Funny thing is it only fires when the video is actually finished playing so it seems it catches the event correctly but the event handler causes the error. – Placeable Nov 18 '13 at 14:54
Yeah using the exact same code nothing happens but if I switch the `on : {...}` to `onended:fn` I get the runtime error. The jsfiddle works for me too. – Placeable Nov 18 '13 at 15:15
Then I really have no idea, this should work just the way it is, and if it doesn't something else is wrong. If the mouse event is firing but not the onended event, something is causing that event to not fire properly, and I really don't know what that could be. – adeneo Nov 18 '13 at 15:19
Yep I am at a loss here as well. Giving you +1 for the help so far. I know your code works but I suspect something else might cause this issue. When inspecting the element in chrome this is how it looks like: `` The `on=...` is the object holding the event listeners. I can't examine it more than this. Oh and also worth mentioning that this time none of the events fires, `ended` or `mouseleave`. – Placeable Nov 18 '13 at 15:24
The code above shouldn't attach the event handlers on the element, you shouldn't see any `on=` in the HTML at all? What version of jQuery are you using. – adeneo Nov 18 '13 at 15:33
I am using 1.7.2. Would that cause a problem? EDIT: Tried your jsfiddle with 1.7.2 and it wouldn't trigger the event then. Seems like it. – Placeable Nov 18 '13 at 15:39
Wouldn't think so, but you could try a newer version. – adeneo Nov 18 '13 at 15:42
Changed to the latest JQuery and sure enough it did the trick. Thanks again for the help. Accepted! – Placeable Nov 18 '13 at 15:46

JQuery listen on video events

1 Answers1