`<track>` - Media text track

The <track> element in HTML5 is used to provide text tracks for media elements such as <audio> or <video>. It is commonly used for subtitles, captions, descriptions, or other text information synchronized with media content.

Basic Syntax of <track>

<track> is an empty element that must be nested within <audio> or <video> tags. Its basic syntax is as follows:

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

Key attributes include:

• src: Specifies the URL of the track file
• kind: Defines the type of track
• srclang: Specifies the language of the track text
• label: Provides a human-readable label for the user interface

Types of the kind Attribute

The kind attribute determines the purpose of the track and can take the following values:

1. subtitles (default): Subtitles, which are translations or transcriptions of the video content
2. captions: Closed captions, including sound effects and other audio information
3. descriptions: Text descriptions of the video content
4. chapters: Chapter titles for navigation
5. metadata: Metadata for scripts, not displayed to users

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
  <track src="desc_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
</video>

WebVTT File Format

The <track> element typically uses files in the WebVTT (Web Video Text Tracks) format. A basic .vtt file looks like this:

WEBVTT

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

00:00:05.000 --> 00:00:08.000
This is the second subtitle

More complex VTT files can include styling and positioning information:

WEBVTT

STYLE
::cue {
  background-color: rgba(0,0,0,0.5);
  color: white;
  font-size: 1.2em;
}

00:00:10.000 --> 00:00:13.000 line:10%
<v Narrator>This text will appear 10% from the bottom of the video

Dynamically Switching Tracks

JavaScript can be used to dynamically control text tracks. For example, implementing multi-language subtitle switching:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/m4">
  <track id="enSub" src="subs_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track id="zhSub" src="subs_zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

<button onclick="switchSub('en')">English</button>
<button onclick="switchSub('zh')">中文</button>

<script>
function switchSub(lang) {
  const video = document.getElementById('myVideo');
  const tracks = video.textTracks;
  
  for (let i = 0; i < tracks.length; i++) {
    tracks[i].mode = tracks[i].srclang === lang ? 'showing' : 'hidden';
  }
}
</script>

Listening to Track Events

You can listen to track-related events using JavaScript:

const video = document.querySelector('video');
const track = video.addTextTrack('subtitles', 'English', 'en');
track.mode = 'showing';

track.oncuechange = function() {
  const activeCues = this.activeCues;
  if (activeCues && activeCues.length > 0) {
    console.log('Current subtitle:', activeCues[0].text);
  }
};

Customizing Track Styles

You can customize subtitle styles using the CSS ::cue pseudo-element:

video::cue {
  background-color: transparent;
  color: yellow;
  font-size: 1.1em;
  text-shadow: 1px 1px 2px black;
}

video::cue(b) {
  color: white;
  font-weight: bold;
}

Accessibility of Tracks

The <track> element greatly enhances the accessibility of media content:

1. Provides captions for hearing-impaired users
2. Offers audio descriptions for visually impaired users
3. Supports multilingual users
4. Provides chapter markers for content navigation

<video controls>
  <source src="documentary.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="en" label="English Captions" default>
  <track src="audio_desc.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
</video>

Browser Compatibility

While modern browsers generally support <track>, note the following:

1. Supported in IE10+ and all modern browsers
2. Different browsers may support varying levels of VTT features
3. Mobile browsers may behave differently

You can perform feature detection to ensure compatibility:

if ('textTracks' in document.createElement('video')) {
  // <track> is supported
} else {
  // Not supported, fallback needed
}

Advanced Usage: Dynamic Track Generation

You can create and add tracks entirely via JavaScript:

const video = document.getElementById('myVideo');
const track = video.addTextTrack('subtitles', 'Dynamic Subtitles', 'zh');
track.mode = 'showing';

track.addCue(new VTTCue(0, 5, 'This is the first dynamically added subtitle'));
track.addCue(new VTTCue(5, 10, 'This is the second subtitle'));

Synchronizing Tracks with Media

Ensuring perfect synchronization between tracks and media is crucial. You can use media fragment identifiers:

<video controls>
  <source src="movie.mp4#t=10,20" type="video/mp4">
  <track src="subtitles.vtt#t=10,20" kind="subtitles" srclang="en" label="English">
</video>

Performance Considerations

When using <track>, consider the following:

1. Large VTT files may impact performance
2. Dynamically adding many cues may cause delays
3. Complex styling calculations may affect rendering performance

// Optimization: Batch add cues
const cues = [];
for (let i = 0; i < 100; i++) {
  cues.push(new VTTCue(i, i+1, `Subtitle ${i}`));
}
track.addCues(cues);

Server Configuration

Ensure the server is correctly configured with the VTT file MIME type:

text/vtt

For Nginx, add the following to the configuration:

types {
  text/vtt vtt;
}

Practical Application Example

A complete video player example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .subtitle-container {
      position: absolute;
      bottom: 50px;
      width: 100%;
      text-align: center;
    }
    .subtitle {
      display: inline-block;
      background-color: rgba(0,0,0,0.7);
      color: white;
      padding: 5px 10px;
      border-radius: 3px;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <div style="position: relative; width: 640px;">
    <video id="video" width="640" height="360" controls>
      <source src="video.mp4" type="video/mp4">
      <track id="defaultTrack" src="subtitles.vtt" kind="subtitles" srclang="en" label="English" default>
    </video>
    <div id="subtitleDisplay" class="subtitle-container"></div>
  </div>

  <script>
    const video = document.getElementById('video');
    const subtitleDisplay = document.getElementById('subtitleDisplay');
    const track = video.textTracks[0];
    
    track.oncuechange = function() {
      const cue = this.activeCues[0];
      subtitleDisplay.innerHTML = cue ? `<span class="subtitle">${cue.text}</span>` : '';
    };
  </script>
</body>
</html>

Integrating Tracks with Media Events

You can combine track events with other media events:

video.addEventListener('timeupdate', function() {
  const currentTime = video.currentTime;
  const cues = track.cues;
  
  for (let i = 0; i < cues.length; i++) {
    if (currentTime >= cues[i].startTime && currentTime <= cues[i].endTime) {
      console.log('Current subtitle:', cues[i].text);
      break;
    }
  }
});

Error Handling

Handle track loading errors:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="missing.vtt" kind="subtitles" srclang="en" label="English" onerror="handleTrackError(this)">
</video>

<script>
function handleTrackError(trackElement) {
  console.error('Failed to load track:', trackElement.src);
  // Try loading a fallback track
  trackElement.src = 'backup.vtt';
}
</script>

Track Metadata

metadata type tracks can store various information:

<video>
  <source src="video.mp4" type="video/mp4">
  <track src="metadata.vtt" kind="metadata">
</video>

<script>
const video = document.querySelector('video');
const track = video.textTracks[0];

track.oncuechange = function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    console.log('Metadata:', data);
    // Perform actions based on metadata, such as displaying related information
  }
};
</script>

Example metadata.vtt file:

WEBVTT

00:00:05.000 --> 00:00:10.000
{"type": "product_info", "id": "12345", "name": "Example Product"}

Multiple Tracks Working Together

You can use multiple types of tracks simultaneously:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="captions.vtt" kind="captions" srclang="en" label="Captions">
</video>

<script>
const video = document.querySelector('video');
const chaptersTrack = video.textTracks[0];
const subtitlesTrack = video.textTracks[1];

chaptersTrack.oncuechange = function() {
  const chapter = this.activeCues[0];
  if (chapter) {
    document.getElementById('currentChapter').textContent = chapter.text;
  }
};
</script>