views:

674

answers:

1

I'm trying to react to the HTML 5 onended event for the video tag without success. In the code snippet below I added the mouseleave event to be sure the jQuery code is correct and that event does activate the alert() box.

The video plays just fine but onended does not cause my alert() to fire off. Testing in Chrome, updated today to version 5.0.375.55.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
<script>
$(document).ready(function(){
  $("#myVideoTag").bind('mouseleave onended', function(){
        alert("All done, function!");
  });
});

</script>
</head>
<body>
<video id="myVideoTag" width="640" height="360" poster="Fractal-zoom-1-04-Snowflake.jpg" controls>
    <source src="Fractal-zoom-1-04-Snowflake.mp4" type="video/mp4"></source>
    <source src="Fractal-zoom-1-04-Snowflake.ogg" type="video/ogg"></source>
</video>

<body>
<html>
+2  A: 

Make sure you're binding to the ended event instead of onended, always leave the on out when binding with jQuery, for example you couldn't do .bind("onclick"), you'd do .bind("click").

If it helps, there's a full listing of available events for the <video> element here: http://dev.w3.org/html5/spec/Overview.html#mediaevents

Disclaimer: this is a link to the development version of the HTML5 spec, it will at some point be an outdated link when the spec is finalized. If you're reading this and that's happened, and you have enough rep, please edit this question to point to the right place.

Nick Craver