The HTML5 <track> element is used to add timed text tracks such as subtitles and captions to a video. 1. It works inside the <video> element, supporting multiple tracks for different languages or purposes. 2. Key attributes include kind (e.g., subtitles, captions), src (path to .vtt file), srclang (language code), label (user-friendly name), and default (auto-enable track). 3. WebVTT files define the timed text cues with specific formatting: first line is WEBVTT, each cue has a time range and text, separated by blank lines. 4. Subtitles translate dialogue for viewers who can hear audio, while captions describe both speech and non-speech elements for accessibility. Proper setup ensures browsers display text at correct times and users can select preferred tracks.

If you're adding subtitles or captions to a video on the web, the HTML5 <track></track> element is the standard way to go. It's built right into the HTML5 video spec and gives you control over text overlays like subtitles, captions, descriptions, chapters, and metadata.

What the <track></track> Element Does

The <track></track> tag works inside a <video></video> element to define timed text tracks. You can use it to show subtitles in different languages, provide closed captions for accessibility, or even add metadata cues that your JavaScript can react to.

Here’s a basic example:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video>

Each track has several attributes that help browsers know how to handle it.

Key Attributes of <track>

To get the most out of <track>, you need to understand its main attributes:

• kind – Defines what type of text track it is. Options include subtitles, captions, descriptions, chapters, and metadata.
• src – The path to the WebVTT file (.vtt) that contains the actual timed text.
• srclang – Specifies the language of the track using ISO language codes (like en for English or es for Spanish).
• label – A user-readable name shown in the browser's menu.
• default – If present, this track will be enabled by default when the video plays.

You can include multiple <track> elements inside one <video> tag — for example, to offer subtitles in different languages.

How to Create and Use WebVTT Files

Web Video Text Tracks (WebVTT) is the format used by <track>. It looks simple but must follow specific formatting rules.

Here’s a quick example of a .vtt file:

WEBVTT

00:00:01.000 --> 00:00:04.000
This is the first subtitle.

00:00:05.000 --> 00:00:07.500
And here comes the second one.

A few things to note:

• The first line must be WEBVTT.
• Each cue starts with a time range, followed by the text.
• Blank lines separate cues.
• Browsers parse these files and display the text at the correct times.

Make sure to host your .vtt files correctly and test them across browsers. Some older browsers may not support all features, so always check compatibility if you're targeting a broad audience.

When to Use Subtitles vs Captions

It’s easy to treat subtitles and captions as the same thing, but they serve slightly different purposes:

• Subtitles are meant for viewers who can hear the audio but might not understand the spoken language. They usually only contain dialogue.
• Captions are for viewers who can’t hear the audio. They include both speech and non-speech information like sound effects, music, or speaker identification.

Use the kind="subtitles" attribute for translating spoken content, and kind="captions" when you want to fully describe everything happening in the audio.

For example:

<track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions" default>

Choosing the right kind improves accessibility and makes your video content more inclusive.

That’s basically it. Once you have your .vtt files ready and linked properly, the browser handles the rest. Just make sure your file paths are correct, and you’re good to go.

The above is the detailed content of HTML5 `` element for video subtitles and captions. For more information, please follow other related articles on the PHP Chinese website!