Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Video in Writing
Accessibility is often overlooked when building a website, especially when audio and video media are being used. Not everyone is able to view or listen to your multimedia in the way you intended it to be.
A video which, by nature, is very visual and aural will not be accessible to those with a sensory impairment. They may be unable to view the video or hear the audio, or even both. Similarly, a viewer may not speak the language in which the video is provided. Obviously, one way of combating this is by providing subtitles for the video, and perhaps textual descriptions of the visual and auditory aspects of the video itself.
HTML5 helps you to achieve the above via the WebVTT (Web Video Text Tracks) file format that allows you to mark up external text tracks and tie them in with the media source via timings. The new track element then enables you to assign various WebVTT files of different types to a multimedia source.
WebVTT files consist of a list of text cues and the timings within the media at which they occur. They can then be assigned to a media source with different roles such as subtitles, text descriptions, and captions. Multiple subtitle files for different languages can also be assigned.
The following example illustrates how a simple video may be assigned both English and French subtitles:
<video controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> <track label="english" kind="subtitles" srclang="en" src="en-sub.vtt"> <track label="french" kind="subtitles" srclang="fr" src="fr-sub.vtt"> </video>
At the moment, none of the major browsers support WebVTT, although they are currently looking into doing so. There are, however, a number of JavaScript video players available that will allow you to utilize WebVTT and the trackelement, such as Playr, Captionator, and MediaElementJS.