Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify the kind of text track in HTML?
The kind attribute in HTML is used to specify the type of text track for the <track> element. This attribute helps browsers understand how to handle and display different types of text tracks, such as subtitles, captions, descriptions, chapters, or metadata.
Syntax
Following is the syntax for the kind attribute −
<track src="filename.vtt" kind="trackType" srclang="languageCode" label="description">
The kind attribute accepts one of the following values −
subtitles − Translation of dialogue and sound effects (default value)
captions − Transcription of dialogue, sound effects, and other audio information
descriptions − Textual descriptions of video content for visually impaired users
chapters − Chapter titles for navigation purposes
metadata − Metadata not visible to users, used by scripts
Using Different Track Types
Example − Subtitles Track
Following example demonstrates how to add subtitle tracks for different languages −
<!DOCTYPE html>
<html>
<head>
<title>Video with Subtitles</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video with Multiple Subtitle Tracks</h2>
<video width="400" height="250" controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
<source src="/html5/sample-video.ogg" type="video/ogg">
<track src="/html5/subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
<track src="/html5/subtitles-es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="/html5/subtitles-fr.vtt" kind="subtitles" srclang="fr" label="French" default>
Your browser does not support the video element.
</video>
<p>Use the CC button on the video player to select subtitle language.</p>
</body>
</html>
Example − Captions Track
Captions include dialogue and sound effect descriptions for hearing-impaired users −
<!DOCTYPE html>
<html>
<head>
<title>Video with Captions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video with Closed Captions</h2>
<video width="400" height="250" controls>
<source src="/html5/demo-video.mp4" type="video/mp4">
<track src="/html5/captions-en.vtt" kind="captions" srclang="en" label="English Captions" default>
Your browser does not support the video element.
</video>
<p>Captions include sound descriptions: [music playing], [door closes]</p>
</body>
</html>
Example − Chapters Track
Chapter tracks provide navigation points within the video content −
<!DOCTYPE html>
<html>
<head>
<title>Video with Chapters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video with Chapter Navigation</h2>
<video width="400" height="250" controls>
<source src="/html5/tutorial-video.mp4" type="video/mp4">
<track src="/html5/chapters.vtt" kind="chapters" srclang="en" label="Chapters" default>
Your browser does not support the video element.
</video>
<p>Right-click on the video to access chapter navigation.</p>
</body>
</html>
Track File Format
Text tracks use WebVTT (.vtt) format. Following is a sample subtitles file structure −
WEBVTT 00:00:01.000 --> 00:00:05.000 Welcome to our HTML5 tutorial 00:00:06.000 --> 00:00:10.000 Learn how to use the track element
Complete Example with Multiple Track Types
Following example demonstrates using different track types together −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Track Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video with Multiple Track Types</h2>
<video width="500" height="300" controls>
<source src="/html5/movie.mp4" type="video/mp4">
<source src="/html5/movie.ogg" type="video/ogg">
<!-- Subtitles for different languages -->
<track src="/html5/subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles">
<track src="/html5/subtitles-es.vtt" kind="subtitles" srclang="es" label="Spanish Subtitles">
<!-- Captions with sound descriptions -->
<track src="/html5/captions-en.vtt" kind="captions" srclang="en" label="English Captions" default>
<!-- Chapter navigation -->
<track src="/html5/chapters.vtt" kind="chapters" srclang="en" label="Chapters">
<!-- Audio descriptions -->
<track src="/html5/descriptions-en.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
Your browser does not support the video element.
</video>
<p><strong>Available track options:</strong></p>
<ul>
<li>English/Spanish subtitles (CC menu)</li>
<li>English captions with sound effects</li>
<li>Chapter navigation (right-click)</li>
<li>Audio descriptions for accessibility</li>
</ul>
</body>
</html>
Key Differences Between Track Types
| Track Type | Purpose | Content | User Access |
|---|---|---|---|
| subtitles | Translation for foreign language content | Dialogue only | CC/subtitle menu |
| captions | Accessibility for hearing impaired | Dialogue + sound descriptions | CC/caption menu |
| descriptions | Accessibility for visually impaired | Visual scene descriptions | Screen readers/audio |
| chapters | Video navigation | Section/chapter titles | Right-click menu/timeline |
| metadata | Script processing | Hidden data/timing info | Not visible to users |
Browser Support
The kind attribute is supported in all modern browsers. However, the display and functionality may vary slightly between different browsers and video players. Always test your implementation across multiple browsers to ensure proper functionality.
Conclusion
The kind attribute is essential for creating accessible video content. Use subtitles for translations, captions for hearing accessibility, descriptions for visual accessibility, chapters for navigation, and metadata for scripting purposes. Proper implementation enhances user experience and ensures content accessibility for all users.
198 Views
