如何通過HTML5視頻顯示字幕或字幕？

要為HTML5視頻添加字幕或說明，需使用元素，1. 在

To show subtitles or captions with an HTML5 video, you need to use the <track></track> element inside the <video></video> tag. This element links external subtitle or caption files to your video, and browsers that support it will display them when the video plays.

Here's how to do it step by step:

1. Use the <track></track> Element

The <track></track> element specifies timed text tracks like subtitles, captions, or descriptions. It works inside the <video></video> tag and supports several attributes:

• kind : Defines the type of text track. Use:
  • "subtitles" – for translation or transcription
  • "captions" – for hearing-impaired viewers (includes sound info)
  • "descriptions" – audio descriptions
  • "chapters" – chapter titles
  • "metadata" – for scripts
• src : The URL of the WebVTT file ( .vtt )
• srclang : Language of the track (eg, "en" , "es" )
• label : User-friendly name shown in the player menu
• default : Optional attribute to make the track enabled by default

2. Prepare a WebVTT File

Subtitles must be in WebVTT format (Web Video Text Tracks), a plain text format with time cues. Example ( subtitles_en.vtt ):

 WEBVTT

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

2
00:00:05.000 --> 00:00:08.000
This is an example of subtitles.

Save this file with a .vtt extension and host it on your server.

3. Add Subtitles to Your HTML5 Video

Here's a complete example with English captions and Spanish subtitles:

 <video controls width="640">
  <source src="myvideo.mp4" type="video/mp4">

  <!-- English captions (for hearing impaired) -->
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English" default>

  <!-- Spanish subtitles -->
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Español">

  Your browser does not support the video tag or text tracks.
</video>

4. What Users Will See

• Most modern browsers (Chrome, Firefox, Edge, Safari) support <track></track> .
• A subtitle/caption button (usually ⚫ or CC ) appears in the video controls.
• Users can click it to choose which track to display (eg, English, Español).
• If you include default , that track will be shown automatically when the video starts.

Notes and Tips

• Always test your .vtt files — invalid time formats or missing WEBVTT header will prevent them from loading.
• Hosting matters: The .vtt file must be served with the correct MIME type ( text/vtt ). Some servers may need configuration.
• Captions vs. subtitles: Use kind="captions" if including non-speech info (like [door creaks] ), otherwise subtitles is fine.
• You can have multiple tracks in different languages — great for accessibility and international audiences.

Basically, just link your .vtt file with <track></track> , set the right attributes, and the browser handles the rest. Not all players show captions the same way, but the standard HTML5 player supports it well.

以上是如何通過HTML5視頻顯示字幕或字幕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！