Skip to content

Building Interactive HTML5 Videos with the element

Updated: at 05:20 PM

Use chapter markers, preview thumbnails and timeline search to give a rich experience with HTML5 video

The HTML5 element makes embedding videos into your site as easy as embedding images. And since all major browsers support since 2011, it’s also the most reliable way to get your moving pictures seen by people.

A more recent addition to the HTML5 family is the element. It’s a sub-element of , intended to make the video timeline more accessible. Its main use case is adding closed captions. These captions are loaded from a separate text file (a WebVTT file) and printed over the bottom of the video display. Ian Devlin has written an excellent article on the subject.

Beyond captions though, the element can be used for any kind of interaction with the video timeline. This article explores 3 examples: chapter markers, preview thumbnails, and a timeline search. By the end, you will have sufficient understanding of the element and its scripting API to build your own interactive video experiences.

Read more from the source: Mozilla Hacks – the Web developer blog