亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Table of Contents
1. Use the Element
2. Prepare a WebVTT File
3. Add Subtitles to Your HTML5 Video
4. What Users Will See
Notes and Tips
Home Web Front-end H5 Tutorial How to show subtitles or captions with an HTML5 video?

How to show subtitles or captions with an HTML5 video?

Aug 02, 2025 pm 12:59 PM
subtitle HTML5 video

To add subtitles or descriptions to HTML5 videos, use the element. 1. Add in the

How to show subtitles or captions with an HTML5 video?

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.

How to show subtitles or captions with an HTML5 video?

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 support several attributes:

How to show subtitles or captions with an HTML5 video?
  • kind : Defines the type of text track. Use:
    • "subtitles" – for translation or transcription
    • "captions" – for hearing-impaired views (including 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.

How to show subtitles or captions with an HTML5 video?

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.

The above is the detailed content of How to show subtitles or captions with an HTML5 video?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Are nfo files subtitles? Are nfo files subtitles? Jan 30, 2023 am 10:49 AM

nfo files are not subtitles, and subtitle files are not in nfo format; common subtitle file formats include Srt format, Webvtt format, STL format, Sbv format, Ass format, Dfxp format, Ttml format, etc.; and nfo records the video producer’s production process A file of various data information for the film.

How to turn on live captions instantly in Windows 11 How to turn on live captions instantly in Windows 11 Jun 27, 2023 am 08:33 AM

How to turn on live subtitles instantly in Windows 11 1. Press Ctrl+L on your keyboard 2. Click Agree 3. A popup will appear saying Ready to add subtitles in English (US) (depending on your preferred language) 4. Additionally, you can filter profanity by clicking the gear button? Preference? Filtering Swear Words Related Articles How to Fix Activation Error Code 0xc004f069 in Windows Server The activation process on Windows sometimes takes a sudden turn to display an error message containing this error code 0xc004f069. Although the activation process is online, some older systems running Windows Server may experience this issue. Pass these preliminary checks and if these checks do not

How to adjust the subtitles of National K-song How to adjust the subtitles of National K-song Feb 23, 2024 pm 07:16 PM

How to adjust the subtitles of karaoke? The subtitles of lyrics can be adjusted in the National Karaoke APP, but many users do not know how to adjust the subtitles of Karaoke moments. The latest solutions to the problems will be continuously sorted out below. Next is the National Karaoke that the editor brings to users. Here is a graphic tutorial on how to adjust subtitles. Interested users can take a look together! Tutorial on the use of National Karaoke. How to adjust the subtitles of National Karaoke. 1. First open the Universal Karaoke APP, switch to the [Voice Sing] section on the main page, select your favorite song and click [K Song]; 2. Then switch to the Karaoke page, Click the red button [Start Singing] at the bottom; 3. Then on the latest page, click the [three dots] function in the upper right corner; 4. Finally, expand the function bar at the bottom and select [Font Size] to adjust

How to add subtitles and speaking sounds to cut videos How to add subtitles and speaking sounds to cut videos Mar 26, 2024 pm 05:14 PM

[Dubbing] 1. Open the clipping app and import the video file to which dubbing needs to be added. 2. Click the &quot;Audio&quot; button at the bottom of the video editing interface and select the &quot;Recording&quot; option. 3. Click the red recording button below to start recording the desired dubbing content. 4. After the recording is completed, click the &quot;Export&quot; button in the upper right corner and save it. [With subtitles] 1. Open the clipping app and import the video file to which subtitles need to be added. 2. Click the &quot;Text&quot; button at the bottom of the video editing interface and select the &quot;New Text&quot; option. 3. Enter the subtitles you want to add in the text box, and then set

How to identify subtitles in the computer version of movie editing - How to identify subtitles in the computer version of movie editing How to identify subtitles in the computer version of movie editing - How to identify subtitles in the computer version of movie editing Mar 04, 2024 am 11:43 AM

Many people are using the computer version of the computer version in the office, but do you know how to recognize the subtitles in the computer version of the computer version? Next, the editor will bring you the method of identifying the subtitles in the computer version of the computer version. Interested users should quickly Let’s take a look below. Open the computer version of the clip and enter the homepage. Select text in the menu bar above the cutout. Just select Start Recognition under Smart Subtitles.

How to add subtitles and dubbing to movie clipping - video editing video tutorial for beginners How to add subtitles and dubbing to movie clipping - video editing video tutorial for beginners Mar 18, 2024 pm 01:04 PM

Add subtitles: 1. Enter the software and click [Start Creating]. 2. Click [Text] below. 3. Select [New Text]. 4. Enter text, adjust the style and save. 5. The addition is completed. Add dubbing: 6. Select [Audio]. 7. Click [Recording]. 8. Start recording. Introductory Tutorial on Screen Cutting 1. Video Segmentation If you want to learn video editing, you must learn video segmentation. For users who have short video production needs, learning video segmentation can allow us to learn video in a very short time. For the basic operations of editing, next we use the Windows 10 version of Silhouette (Shadow) to demonstrate how to split a video. As shown below: The material of the video is a TV series image. New users can use this type of video first.

Douyin automatic subtitle setting operation explanation Douyin automatic subtitle setting operation explanation Mar 26, 2024 pm 08:20 PM

1. Now if you want to set up automatic subtitles, the first step is to shoot a video through Douyin, or import a local video file on your phone, enter the video editing page, and find the drop-down button in the upper right corner (as shown below). 2. Through the drop-down list, we can find the new [Automatic Subtitles] function. Click to identify the voice in the current video and add subtitles. 3. Moreover, the color, format and other effects of subtitles can now be automatically set by you, allowing more users to enjoy the convenience. If you are interested, start now.

How to play a video file with subtitles using PHP? How to play a video file with subtitles using PHP? Aug 07, 2023 pm 12:13 PM

How to play a video file with subtitles using PHP? With the development of Internet technology, video has become one of the most popular forms of online content. Now, many video files are equipped with subtitles, which makes it easier for users to understand and digest video content. So, how to use PHP to play video files with subtitles on a web page? This article will introduce it to you in detail. First, we need to prepare the following environment: a server with a PHP running environment (such as Apache or Nginx); a video file (support

See all articles