To embed video or audio with subtitles and audio tracks into a web page, it can be achieved through HTML native functionality. 1. Use the <track> tag to add a WebVTT format subtitle file and set the kind, srclang and label attributes; 2. Support multilingual subtitles through multiple <track> elements, and use the default attribute to set the default language; 3. Multi-track can control multiple <audio> elements to switch through JavaScript, or use more complex media extension solutions; 4. Pay attention to browser compatibility, path configuration and format verification to ensure normal operation on different devices and provide backup solutions.

When embedding video or audio in a web page, adding subtitles and audio tracks can significantly improve accessibility and user experience. HTML provides native support, which can be achieved in just a few steps.

Add subtitles using the <track></track> tag

The <track></track> element of HTML allows you to add subtitles, chapters, descriptions and other text tracks to videos or audios. The most common use is to add subtitles.

• Subtitle files are usually in WebVTT (.vtt) format.
• <track></track> needs to be placed inside <video></video> or <audio></audio> .
• Set kind attribute to specify track types, such as subtitles , captions , descriptions , etc.
• srclang is used to specify the language, and the browser selects the appropriate subtitles accordingly.

For example:

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

This way the user can choose to enable English subtitles in the player.

Supports multilingual subtitles

If your website is for international users, it is a good idea to provide subtitles in multiple languages. Just add multiple <track> elements and set different srclang and label .

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

A few points to note:

• The browser will automatically match the appropriate subtitles according to the user's system language.
• Adding the default attribute can enable a certain language by default.
• Subtitle files in different languages ??need to accurately correspond to the content, otherwise it will cause confusion.

Add multiple tracks (such as comment tracks)

Although HTML native support for multi-tracks is not as direct as subtitles, it can be used to switch different audio tracks through JavaScript.

A common practice is to use multiple <audio> elements to switch by controlling their playback status:

 <audio id="mainAudio" src="music.mp3" controls></audio>
<button onclick="switchTrack(&#39;music.mp3&#39;)">Main track</button>
<button onclick="switchTrack(&#39;commentary.mp3&#39;)">Comment track</button>

<script>
  function switchTrack(src) {
    const audio = document.getElementById(&#39;mainAudio&#39;);
    audio.src = src;
    audio.play();
  }
</script>

Of course, if more complex track management is required, you can consider using Media Source Extensions or third-party libraries.

Notes and compatibility issues

Although HTML's multimedia functions are becoming more and more powerful, there are still some things to pay attention to in practical applications:

• Not all browsers fully support all features of WebVTT.
• Safari on iOS has limited support for certain <track></track> features.
• The subtitle file path must be correct, and the server configuration must also allow cross-domain loading (if there is a cross-domain case).
• The multi-track switching experience may vary by device or browser.

To ensure the best results:

• Test your implementation on multiple browsers and devices.
• Provide fallback (alternative solution), such as displaying static subtitles when prompted not supported.
• Use the tool to verify that the WebVTT file format is correct.

Basically that's it. It is not complicated to implement, but it is easy to ignore details, especially file format and path issues.

The above is the detailed content of Adding captions and tracks to HTML video and audio elements.. For more information, please follow other related articles on the PHP Chinese website!