Detect when an HTML5 video finishes

Handling advanced video playback scenarios

While the fast solution works for basic use-cases, we can dive deeper to tackle advanced scenarios surrounding video playback, including looping videos, user-paused content, and executing code for more interactions post-video.

Manipulating end-of-video events

Working with events tied to the video's lifecycle provides the power to direct what takes place post-playback. Upon the ended event, we might want to:

• Showcase related videos or a persuasive call-to-action
• Gather insightful analytics on video completion rates
• Reset the video player for a potential rerun

Looping and user interaction

For looping videos, or when we implement custom controls, we need to navigate user actions that could interrupt a 'ended' event listener. We also need to consider the browser inconsistencies that might require fallback techniques for a seamless experience.

Using onended attribute:

<video id="myVideo" onended="onVideoEnd()">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>
function onVideoEnd() {
  // hehe... the end is just the beginning
}
</script>


For custom controls, consider listening to the timeupdate event and checking if the currentTime equals the duration of the video, a handy workaround for situations where 'ended' might throw a tantrum.

jQuery magic

For developers working with jQuery, you can easily bind event handlers.

jQuery event binding:

$('video').on('ended', function() {
    // insert witty comment here
    console.log("Wow, you watched that thing till the end, you deserve a medal!");
});


Managing edge cases

Abnormal situations require flexible solutions. How about handling:

• Browser inconsistencies: Run tests extensively, implement workarounds wherever required.
• Non-HTML5 support: Discrete fallbacks to Flash or other technologies could solve the issue.
• Video played within a modal: Be prepared for the modal closing and video interaction.

Get the best out of video events for an exquisite user experience.

Advanced techniques to investigate

For those striving for more control, delving into libraries like Video.js will provide a toolbox for attaining the perfect video experience. As a bonus, playing with the <canvas> element opens possibilities for rich graphics and synchronized interactions with video playback.

Building using Video.js:

Unleash Video.js for customizations and plugins for a superior video behavior beyond native capabilities.

The charms of <canvas>:

Craft animations, graphical overlays reacting to video playback, novel user interactions, all through the power of the <canvas> element.

Prioritizing Accessibility and UX:

Always integrate aria-labels and accessible controls when introducing custom video interfaces, specifically curated to make your content accessible for everyone.