HTML5: Subtitle videos with the track element

Since the introduction of HTML5 videos, it is possible to play videos without any plug-ins. But HTML5 videos offer much more than videos natively display in the browser. With the track function even subtitles can be faded in within videos. These are stored in his separate text file and can be displayed in the video at the push of a button. This is how you make videos accessible to the hearing-impaired and those who do not have speakers at their disposal.

That can do that -Element

The basis for the integration of subtitles is thatElement that refers to the text file with the subtitles and defines the type of text overlay. In addition to subtitles (subtitles), there is also the possibility of captions (captions), Descriptions (descriptions), Chapter (capitals) and metadata (metadata).

However, the most common type of text overlay is likely to be the subtitles used to render the spoken word. The subtitle output is also the only text overlay supported by “normal” browsers. All other types of overlays can only be interpreted by special screen readers for people with visual impairments.

html5_video_track

As a metadata excellent tracks are basically not spent. They can be used, for example, if you want to use certain content exclusively via JavaScript.

The following example shows a classic integration of an HTML5 video.

					
						
					
				

ByElement, different video formats are included because each browser prefers a different format. Two followElements – one for subtitles and one for descriptions. The type of text overlays is over thechildAttribute is determined. While the valuesubtitlesclassic subtitles are reproduced bydescriptionsDescriptions reproduced.

Descriptions, for example, are used to render a scenery in textual form. If you want to make videos accessible to people with visual impairments, it makes sense to have oneElement for descriptions. Screen readers can then output these descriptions. Other browsers ignore Description tracks as well as the other tracks (except for subtitles).

About thesrcAttribute specifies the file in which the texts for the video are stored. For the browser to interpret the overlays, they must be stored in a specific format. The common format isWebVTT: Web Video Text Tracks.

Last but not least we need thatsrclang-Attribute with which the language of the inserts can be specified. This attribute allows you to save your own text file with overlays for different languages. This can look like this:

					
						
					
				

In the example, we deposit subtitles in German and English. The attributedefaultindicates which language should be played by default.

Structure of the WebVTT files

The text file is introduced with the specification of the used format. The individual text overlays are separated by blank lines,cuescalled. EveryoneCueconsists of specifying a period of time during which the overlay is to be displayed as well as the text to be displayed.

					WEBVTT FILE 00: 00: 05.000 -> 00: 00: 20.000 I want to see that in black and white. 00: 00: 35,000 -> 00: 00: 50,000 Me too.
				

In the example, the first text fade starts at five seconds and ends at 20 seconds. The time span must be specified exactly as shown in the example. For the two times, it is mandatory to specify hours, minutes, seconds and milliseconds. The separation of insertion start and end is done via “->” and is separated from the times with spaces.

Then we indicate the text to be overlaid. This can extend over several lines. Only with a blank line will the next display be started.

Activate subtitles for a video

Once for a video perSubtitles are deposited, an additional button with the caption appears in the control barCCfor “closed captioning”. This button will show and hide the subtitles. If there are subtitles in several languages for a video, clicking on the button displays a list of available languages.

cc_logo

Owns one of theElements thatdefault-Attribut, the subtitles are automatically activated. However, they can also be switched off again via the button.

Presentation of the impressions

By default, the fonts are in white text on a black background. Stylesheets, however, can be used to customize the look of the overlays. For this there is the pseudo element:: cue, In addition, it is possible to change the font and color as well as the background color for the overlays.

					:: cue {color: black; background: white; }
				

The information in the example shows the fonts in black on a white background.

html5_video_track_einblendung

Access tracks and cues via JavaScript

By JavaScript, you’re talking about the embedded tracks. So you have the ability to turn subtitles on and off via JavaScript. This is useful if, for example, you have designed your own control bar and have to control the individual buttons via JavaScript.

					document.getElementsByTagName ("video") [0] .textTracks [0] .mode = "showing";
				

In the example, the first video element of an HTML document and pertext tracksthe first in this excellent track addressed. About the propertyFashioncan the fade in (showing) and off (hidden) become.

Instead of just the tracks can also be individualcuesbe queried. So it is possible to read each individual text overlay by JavaScript.

					alert (document.getElementsByTagName ( "video") [0] .textTracks [0] .cues [3] .text);
				

In the example becomes the fourthCueof the first track. Bytextthe corresponding display text is output in an alert.

In the future, tracks andcuesdynamically add via JavaScript. Currently this is not supported by any browser.

browser support

All current browsers support this-Element. Only the Opera on Android and the mobile Safari do not play along.

Post picture: Depositphotos

(The post first appeared in June 2014 and has been kept up to date since then, with the last update in April 2019.)