The `<track>` tag is an HTML element that is used to specify a text track for a video or audio element. A text track is used to display captions, subtitles, descriptions, or other forms of text alongside the audio or video content. The `<track>` element can be used in conjunction with the `<video>` or `<audio>` element to provide a more accessible and inclusive user experience.
In this tutorial, we will cover the basics of the `<track>` tag, including how to use it to add captions to a video.
Syntax
The `<track>` tag has the following syntax:
<track src=”url” kind=”subtitles” srclang=”language_code” label=”label_text”>
Let’s take a closer look at each of the attributes:
– `src`: Specifies the URL of the text track file. This attribute is required.
– `kind`: Specifies the kind of text track. The most common values are “subtitles” (for dialog and non-speech sounds) and “captions” (for dialog only). Other possible values include “descriptions” (for audio descriptions of video content), “chapters” (for chapter titles), and “metadata” (for additional information about the media). The default value is “subtitles”.
– `srclang`: Specifies the language of the text track. This attribute is required and should be a valid ISO language code (e.g., “en” for English, “es” for Spanish).
– `label`: Specifies the label to display for the text track. This attribute is optional, but it is recommended to provide a label for accessibility purposes.
Adding Captions to a Video
To add captions to a video, you will need to create a text track file in the WebVTT format (Web Video Text Tracks). WebVTT is a simple text format that can be edited with any text editor. The file should have a `.vtt` extension and be saved on your web server or in the same directory as your HTML file.
Here is an example of a WebVTT file with captions for a video:
WEBVTT
00:00:00.000 –> 00:00:05.000
Welcome to our video tutorial on HTML5!
00:00:05.000 –> 00:00:10.000
In this tutorial, we will cover the basics of the <track> tag.
00:00:10.000 –> 00:00:15.000
We will also show you how to use it to add captions to a video.
00:00:15.000 –> 00:00:20.000
Let’s get started!
In this example, each caption is specified with a start time, end time, and text content. The time format is `hh:mm:ss.mmm`, where `hh` is hours, `mm` is minutes, `ss` is seconds, and `mmm` is milliseconds.
Once you have created your WebVTT file, you can add the `<track>` element to your `<video>` element like this:
<video controls>
<source src=”myvideo.mp4″ type=”video/mp4″>
<track src=”mycaptions.vtt” kind=”captions” srclang=”en” label=”English”>
</video>
In this example, the `<video>` element has a source file of “myvideo.mp4” and a caption track file of “mycaptions.vtt”. The `kind` attribute is set to “captions” and the `srclang` attribute is set to “en” for English. The `label` attribute is set to “English” to identify the language of the captions.
