Create accessible videos with HTML5

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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.