Using the TextTrack API to provide captions dynamically
Status
- New technique.
Applicability
- HTML5 and client side scripting
WCAG references
- media-equiv-captions: SC 1.2.2 Captions(Prerecorded) (sufficient)
- media-equiv-captions: SC 1.2.4 Captions(Live) (sufficient)
User Agent and Assistive Technology Support Notes
Description
The objective of this technique is to use the HTML5 timed text tracks API to manupluate the list of pending text tracks for a video media element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.
Examples
Example 1
Live caption cue handling.
var stream = new Video('stream.webm'); var captions = stream.addTextTrack('captions', 'live captions', 'en-US'); // as caption cues come in, add them to the track for display stream.addCue(new TextTrackCue('1', 12.783, 14.612, 'Mum, give me the butter.')); stream.addCue(new TextTrackCue('2', 14.612, 16.091, 'I am waiting for the magic word!'));