- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <track> Tag
The HTML <track> tag is used to define the time-based text tracks for a media file. The <audio> and <video> elements must employ the <track> tag as a child element. Adding Subtitles, captions, and other types of text can be added using the <track> tag and will be displayed when a media file is playing. This tag is new introduced in HTML5. The format for tracks is WebVTT (.vtt files).More than one track with the same label, srclang, and kind cannot be included in a media element.
Syntax
<track src=" " kind=" " srclang=" " label=" ">
Attribute
HTML track tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
default | default | Specifies that, the track to enabled if the user wants to change the track. |
kind | captions chapters descriptions metadata subtitles |
Specify the kind of track to be used. |
label | text | Displays title of text track. |
src | URL | Specify the track URL. |
srclang | language_code | Specify language of the track text data (required if kind="subtitles"). |
Examples of HTML track Tag
Bellow examples will illustrate the usage of track tag. Where, when and how to use track tag.
Creating English Video Track
Let’s look at the following example, where we are going to use the <track> and get the subtitles in English.
<!DOCTYPE html> <html> <head> <title>Video Player</title> <style> video { width: 30%; height: 40%; } </style> </head> <body> <video controls> <source src= "https://cdn.pixabay.com/vimeo/830461265/fogging-164360.mp4?width=1280&hash=f05a9cb58caeefbe7afe937ce7f9a00784d5f219" type="video/mp4"> <track src="ex1.vtt" kind="captions" label="English" srclang="en"> </video> </body> </html>
Captions file
Save the following captions file with name "ex1.vtt"
WEBVTT 00:00:00.000 --> 00:00:10.000 Tuotorialspoint 00:00:10.000 --> 00:00:20.000 Simply Easy Learning 00:00:20.000 --> 00:00:30.000 Tutorialspoint.com is a dedicated website to provide quality online education 00:00:30.000 --> 00:00:35.000 Global headquarters for Tutorials Point is located in Hyderabad,Telangana,India. 00:00:35.000 --> 00:00:41.000 Mohtashim M. is the Founder & Managing Director at Tutorials Point .
To execute the above program, place the "ex1.vtt" (captions) and the "index1.html" (HTML document) in a single folder to see the expected output. And to see the output the user need to on the captions in the player.
Creating Korean Video Track
Consider another scenario where we are going to add the subtitles in the Korean language.
<!DOCTYPE html> <html> <body style="background-color:#D5F5E3 "> <video width="300" height="150" controls autoplay> <source src= "https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4"> <track src="ex2.vtt" kind="captions" label="Korean" srclang="ko"> </video> </body> </html>
Captions file
Save the following captions file with name "ex2.vtt" −
WEBVTT 00:00:00.000 --> 00:00:02.000 환영 00:00:02.000 --> 00:00:05.000 아름다운 세상으로.! 00:00:05.000 --> 00:00:07.000 많은 생물을 찾을 수 있는 곳 00:00:07.000 --> 00:00:10.000 많은 전통과 많은 종교s
To execute the above program, place the "ex2.vtt" (captions) and the "index2.html" (HTML document) in a single folder to see the expected output. And to see the output the user need to on the captions in the player.
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
track | Yes 23.0 | Yes 10.0 | Yes 31.0 | Yes 6.0 | Yes 12.1 |
To Continue Learning Please Login
Login with Google