Executing function at end of html5 video
For your paste & copy pleasure the jQuery solution:
<video width="320" height="240"> <source src="movie.mp4" type="video/mp4"></video><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>/*<![CDATA[*/ $(document).ready(function(){ $('video').on('ended',function(){ console.log('Video has ended!'); }); });/*]]>*/</script>Replace the 'video'-part with the correct selector for your video.
EDIT: Here is the solution without jQuery:
<video width="320" height="240"> <source src="movie.mp4" type="video/mp4"></video><script>/*<![CDATA[*/ document.querySelector('video').addEventListener('ended',function(){ console.log('Video has ended!'); }, false);/*]]>*/</script>Replace the 'video'-part with the correct selector for your video.
<html><head> <title></title> <script>function videoEnded() { alert('video ended');} </script></head><body><video src="video/endscene.mp4" id="video" controls onended="videoEnded()"> video not supported</video></body></html>
use onended event
var video = document.getElementsByTagName('video')[0];video.onended = function(e) { alert('video ended');}Read more on Everything you need to know about HTML5 video and audio