使用HTML為視頻添加字幕需在

Adding subtitles to a video in HTML is straightforward using the <track></track> element alongside the <video></video> tag. This method allows you to provide timed text tracks such as subtitles or captions, improving accessibility and user experience.

How the <track></track> Element Works

The <track></track> element is used inside a <video></video> tag to specify external text tracks. It supports several kinds of text content, but for subtitles, you'll typically use kind="subtitles" .

Here's the basic syntax:

 <video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support the video tag.
</video>

Required Attributes for Subtitles

To make subtitles work correctly, you need to set a few key attributes on the <track> element:

• src : The URL of the WebVTT file (eg, subtitles_en.vtt )
• kind : Set to "subtitles" to indicate this track contains subtitles
• srclang : The language of the subtitles (eg, "en" for English, "es" for Spanish)
• label : A user-readable label shown in the player's menu (eg, "English")
• default (optional) : Indicates this track should be enabled by default if the user's browser settings don't specify a preference

Note: The default attribute should only be used on one track to avoid conflicts.

Creating a WebVTT File

The subtitle file must be in WebVTT format (Web Video Text Tracks), which is a plain text format with time cues and text to display.

Example: subtitles_en.vtt

 WEBVTT

1
00:00:01.000 --> 00:00:04.000
Hello, welcome to this video.

2
00:00:05.000 --> 00:00:08.000
Here we explain how to add subtitles.

Make sure:

• The file starts with WEBVTT (followed by a blank line)
• Time format is HH:MM:SS.mmm → HH:MM:SS.mmm
• There's a blank line between cues
• The file is saved with UTF-8 encoding

Multiple Subtitle Languages

You can offer subtitles in multiple languages by adding more <track> elements:

 <video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
  <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French">
</video>

Users can switch between languages using the video player's subtitle menu (available in most modern browsers).

Important Notes

• The WebVTT file must be hosted on the same domain or served with proper CORS headers if hosted externally.
• Browsers may not display subtitles if the video is not played with user interaction (eg, autoplay restrictions).
• Always test across browsers—support is good in modern ones, but styling and positioning of subtitles can vary.

Basically, with a proper WebVTT file and the right <track></track> attributes, adding subtitles becomes simple and effective.

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