使用<track>元素添加字幕或標(biāo)題的關(guān)鍵在於鏈接格式正確的文本文件（如WebVTT）到媒體元素。 1. <track>用於在

Adding subtitles or captions to audio and video using the <track></track> element is straightforward once you understand how it fits into your HTML structure. The key is linking a properly formatted text file (like WebVTT) with your media element.

What <track></track> does and when to use it

The <track></track> tag is used inside <audio></audio> or <video></video> elements to specify timed text tracks — like subtitles, captions, descriptions, or chapters. These help make your content more accessible and can improve user experience for non-native speakers or people in sound-sensitive environments.

You'll typically use <track></track> when:

• You want to provide translations
• You need closed captioning for accessibility
• You're adding metadata cues that trigger events during playback

It doesn't display by default unless the user enables it or you set it via code.

How to format your subtitle file

Before using <track></track> , you need a correctly formatted time-based text file. WebVTT (.vtt) is the standard supported by most browsers. Here's what a basic WebVTT file looks like:

 WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to this video tutorial.

00:00:05.000 --> 00:00:08.000
In this session, we'll cover the basics.

Make sure:

• The first line says WEBVTT (with no extra characters)
• There are two newlines between each cue
• Timecodes are in HH:MM:SS.mmm format

Save this file with a .vtt extension and host it on your server or CDN so it's accessible via URL.

Basic usage of <track> in HTML

Once you have your .vtt file ready, you can add it to your media element like this:

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

Here's what each attribute means:

• src : Path to your WebVTT file
• kind : Type of track ( subtitles , captions , descriptions , chapters , or metadata )
• srclang : Language of the track (eg, en for English)
• label : Human-readable title shown to users
• default : Tells the browser to enable this track by default

If you're adding multiple language options, just include more <track> elements:

 <track src="subtitles-es.vtt" kind="subtitles" srclang="es" label="Espa?ol">
<track src="subtitles-fr.vtt" kind="subtitles" srclang="fr" label="Fran?ais">

Most modern browsers will show these as selectable options in the native player UI.

Common issues and troubleshooting tips

Sometimes things don't work right away. Here are common gotchas:

• Browser not showing subtitles? Make sure the file is correctly formatted and served with the right MIME type ( text/vtt )
• Cues not syncing up? Double-check your timecodes — even small errors can cause delays
• File not loading at all? Verify the path in your browser dev tools under Network tab
• Not working offline? Browsers may block local .vtt files due to CORS; test on a local server instead

Also, keep in mind that styling is limited through CSS unless you build a custom UI. For example, you can change the color of subtitles globally like this:

 ::cue {
  color: yellow;
}

But full customization usually requires JavaScript and a custom overlay layer.

That's basically how you use the <track></track> element. It's not complicated, but there are a few important details to get right — especially around file formatting and correct HTML attributes. Once everything lines up, though, it works reliably across modern browsers.

以上是如何使用元素將字幕或字幕添加到音頻和視頻元素？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！