Subtitles and track support ('<track>' tag)

The <track> tag is an important element in HTML5 that provides subtitle, caption, or other text track support for media elements like <video> and <audio>. It allows developers to embed external text resources, enhancing media accessibility and user experience.

Basic Syntax of the <track> Tag

The <track> tag must be used as a child element of <video> or <audio>, typically placed after the <source> tag. 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 Attribute Explanations

• src: Specifies the path to the track file (e.g., WebVTT format file)
• kind: Defines the track type, with optional values including:
  • subtitles (default): Translated dialogue or text
  • captions: Includes sound descriptions
  • descriptions: Text descriptions of video content
  • chapters: Chapter navigation
  • metadata: Metadata for scripts
• srclang: Language code of the track text (e.g., "en", "zh")
• label: User-visible track name
• default: Marks the track as the default (boolean attribute)

WebVTT File Format

The <track> tag typically uses files in WebVTT (.vtt) format. A sample subtitle file looks like this:

WEBVTT

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

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

Detailed WebVTT File Structure

1. File Header: Must start with WEBVTT
2. Timeline: Format is HH:MM:SS.mmm --> HH:MM:SS.mmm
3. Text Content: Supports simple HTML tags like <b>, <i>, <ruby>
4. Styling Support: Custom styles can be applied via CSS pseudo-elements like ::cue

Advanced Usage Examples

Multi-Language Subtitle Support

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="captions_zh.vtt" kind="captions" srclang="zh" label="中文说明">
</video>

JavaScript Dynamic Control

const video = document.querySelector('video');
const tracks = video.textTracks; // Get all text tracks

// Listen for track changes
tracks.onchange = function(e) {
  const track = [...this].find(t => t.mode === 'showing');
  console.log('Currently showing track:', track.label);
};

// Dynamically add a track
function addTrack(src, lang, label) {
  const track = document.createElement('track');
  track.src = src;
  track.kind = 'subtitles';
  track.srclang = lang;
  track.label = label;
  video.appendChild(track);
}

Custom Styling

Subtitles can be styled using CSS:

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

video::cue(b) {
  color: yellow;
}

video::cue(.warning) {
  color: red;
}

The corresponding WebVTT file can include class names:

00:00:10.000 --> 00:00:13.000
This is a <b>bold</b> subtitle

00:00:15.000 --> 00:00:18.000
<span class="warning">Warning content</span>

Practical Application Scenarios

Educational Videos

Add multi-language subtitles and chapter markers to instructional videos:

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="chapters.vtt" kind="chapters" srclang="en">
  <track src="transcript.vtt" kind="subtitles" srclang="en" default>
</video>

Accessibility

Provide detailed descriptions for hearing-impaired users:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track src="descriptions.vtt" kind="descriptions" srclang="en">
  <track src="captions.vtt" kind="captions" srclang="en" default>
</video>

Compatibility and Considerations

1. Browser Support: All modern browsers support the <track> tag, but IE11 requires a polyfill
2. CORS Restrictions: Track files must follow the same-origin policy or have proper CORS headers
3. MIME Type: WebVTT files should use the text/vtt MIME type
4. Performance Considerations: Large numbers of tracks or large VTT files may impact loading performance

Error Handling and Debugging

Listen for error events when track loading fails:

const track = document.querySelector('track');
track.addEventListener('error', (e) => {
  console.error('Track loading failed:', track.src);
});

Debug track states:

const video = document.querySelector('video');
const tracks = video.textTracks;

for (let i = 0; i < tracks.length; i++) {
  const track = tracks[i];
  console.log(`Track ${i}:`, {
    label: track.label,
    language: track.language,
    mode: track.mode, // "disabled", "hidden", "showing"
    cues: track.cues
  });
}

Extended Functionality Implementation

Real-Time Subtitle Switching

<video controls id="main-video">
  <source src="presentation.mp4" type="video/mp4">
</video>

<div class="subtitle-controls">
  <button onclick="setSubtitle('en')">English</button>
  <button onclick="setSubtitle('zh')">中文</button>
  <button onclick="disableSubtitle()">Turn Off Subtitles</button>
</div>

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

function disableSubtitle() {
  const video = document.getElementById('main-video');
  const tracks = video.textTracks;
  
  for (let i = 0; i < tracks.length; i++) {
    tracks[i].mode = 'hidden';
  }
}
</script>

Dynamically Generating WebVTT Content

function generateVTT(texts) {
  let vttContent = 'WEBVTT\n\n';
  
  texts.forEach((text, index) => {
    const start = formatTime(text.startTime);
    const end = formatTime(text.endTime);
    vttContent += `${start} --> ${end}\n${text.content}\n\n`;
  });
  
  return URL.createObjectURL(new Blob([vttContent], { type: 'text/vtt' }));
}

function formatTime(seconds) {
  const date = new Date(0);
  date.setSeconds(seconds);
  return date.toISOString().substr(11, 12);
}

// Usage example
const subtitles = [
  { startTime: 1, endTime: 4, content: "First subtitle" },
  { startTime: 5, endTime: 8, content: "Second subtitle" }
];

const vttUrl = generateVTT(subtitles);
document.querySelector('track').src = vttUrl;