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 I am not receiving the onended
event (my alert()
does not fire).
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"></script>
<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>
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 .on("onclick")
, you'd do .on("click")
.
If it helps, there's a full listing of available events for the <video>
element here: http://www.w3.org/2010/05/video/mediaevents.html
I was searching for the answer for this too. Here's what worked for me in for the jQuery mobile framework:
$(document).ready(function(){
$("#idname").bind('ended', function(){
$.mobile.changePage($('#idofpageyouwantogoto'), 'fade');
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With