Custom HTML5 video functionality must be accessible and intuitive
Video is an important consideration for a broadcasting company. The BBC presents web-based video in a variety of different ways. Sometimes the video is embedded in a fully-featured player, and in other cases just a couple of basic controls are present. The purpose of this documentation is to set out the recommended interaction design for custom video controls.
Before enhancing a video instance with custom controls, there are a few fundamental considerations. Here is a code example, with notes to follow.
<video controls> <source src="path/to/video.webm" type="video/webm"> <source src="path/to/video.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="path/to/captions.vtt" default> <p> Your browser doesn't support HTML5 video. <a href="path/to/video.mp4" download>Download</a> the video instead. </p> </video>
<video>: The standard video element is used.
mp4: A well-supported video format is included (optionally with alternative formats via
controls: Controls are activated via the
download: An option to download the video is provided for browsers not supporting HTML5 video.
kind="subtitles": Videos with dialogue need captions, provided in
<track>elements. In the following examples, only a single English captions track is provided, but additional languages should be supported where possible.
If your video has dialog and you are using custom controls, do one of the following:
- Display captions by default
- Provide custom controls to access captions
- Provide an option to switch back to using native controls (which will include captions functionality)
<video> should take
controls to provide the native controls, and any custom controls should be hidden with
<div class="gel-video__container" role="group"> <video controls> <source src="path/to/video.webm" type="video/webm"> <source src="path/to/video.mp4" type="video/mp4"> <p> Your browser doesn't support HTML5 video. <a href="path/to/video.mp4" download>Download</a> the video instead. </p> </video> <div class="gel-video__controls" hidden> <!-- custom controls here --> </div> </div>