With HTML5 it’s been possible to add video content to a web page without a plug-in for a while now. HTML5 also makes it easier to provide alternative formats for your content.
The <video> element embeds multimedia content into the page. At its most simple, it uses the src attribute to point to the video source file.
<video src="movie.webm" controls></video>
When present, the controls attribute indicates that the browser should display its own set of UI controls for functions such as play/pause. If you script your own set of UI controls, the attribute provides a fallback when scripting is disabled in the browser. You can also provide fallback content for legacy browsers. This might be static text, a link to download the video file, or advice on how to upgrade to an HTML5 aware user agent.
<video src="movie.webm" controls>Fall back content for legacy browsers.</video>
The poster attribute can be used to display a static placeholding image. There is still some discussion about the way poster is handled within the HTML5 specification, but for now it’s an attribute of the <video> element itself.
<video src="movie.webm" poster="image.jpg" controls>Fall back content for legacy browsers.</video>
The <track> element is a child of the <video> element used to point to an external timed text file providing supplementary information for the video. It uses the kind attribute to specify which type of information to provide.
- Subtitles (default): gives dialogue translation when sound is not understood.
- Captions: full audio transcription when sound is unavailable or can’t be heard by the viewer.
- Descriptions: transcription of visual content for conversion into synthetic speech.
- Chapters: provides a navigation mechanism for browsing the video content through an interactive list in the UI.
- Metadata: used to provide access to tracks for use with scripts.
<video src="movie.webm" poster="image.jpg" controls><track kind="captions" src="captions.vtt">Fall back content for legacy browsers.</video>
This example uses the Web Video Text Tracks (Web VTT) format to provide the captions file. Web VTT enables you to map a time cue to a piece of text (transcribed from the original sound dialogue). Tom Leadbetter explores Web VTT in more detail on the HTML5 Doctor website.
The <video> element is supported in all current browsers. Sadly, support for the <track> element and Web VTT lags behind. Browser vendors are working on both though, so it won’t be long until we’re closer to truly inclusive HTML5 video.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.