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
HTML DOM Track kind Property
The HTML DOM Track kind property sets or returns the value of the kind attribute of a track element. This property specifies the type of text track associated with media elements like video and audio, helping browsers understand how to handle and display track content.
Syntax
Following is the syntax for getting the kind property −
trackObject.kind
Following is the syntax for setting the kind property −
trackObject.kind = stringValue
Parameters
The stringValue parameter can be one of the following track types −
| Value | Description |
|---|---|
captions |
Closed captions that include dialogue and sound effects. Suitable for deaf or hard-of-hearing users. |
chapters |
Chapter titles used for navigating through different sections of the media resource. |
descriptions |
Text descriptions of visual content in the video. Suitable for blind or visually impaired users. |
metadata |
Track data not visible to users, intended for use by scripts for programmatic access. |
subtitles |
Subtitles that display spoken dialogue in different languages or for hearing accessibility. |
Return Value
The property returns a string representing the current kind value of the track element. If no kind is specified, it returns an empty string.
Example
Following example demonstrates how to get the kind property of track elements −
<!DOCTYPE html>
<html>
<head>
<title>Track kind Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.video-container { text-align: center; margin: 20px 0; }
button {
padding: 10px 15px;
margin: 10px;
border-radius: 5px;
border: 1px solid #ccc;
background: #f8f9fa;
cursor: pointer;
}
button:hover { background: #e9ecef; }
#output {
margin-top: 15px;
padding: 10px;
border: 1px solid #dee2e6;
border-radius: 5px;
background: #f8f9fa;
}
</style>
</head>
<body>
<h2>Track Kind Property Demo</h2>
<div class="video-container">
<video id="myVideo" controls width="300">
<source src="sample.mp4" type="video/mp4">
<track id="track1" kind="subtitles" src="movie-en.vtt" srclang="en" label="English Subtitles">
<track id="track2" kind="captions" src="movie-captions.vtt" srclang="en" label="English Captions">
<track id="track3" kind="chapters" src="movie-chapters.vtt" srclang="en" label="Chapters">
Your browser does not support the video element.
</video>
</div>
<button onclick="showTrackKinds()">Show All Track Kinds</button>
<button onclick="changeTrackKind()">Change First Track Kind</button>
<div id="output"></div>
<script>
function showTrackKinds() {
var tracks = document.querySelectorAll('track');
var output = document.getElementById('output');
var result = '<h3>Track Information:</h3>';
for (var i = 0; i < tracks.length; i++) {
result += '<p><strong>Track ' + (i + 1) + ':</strong> Kind = "' +
tracks[i].kind + '", Label = "' + tracks[i].label + '"</p>';
}
output.innerHTML = result;
}
function changeTrackKind() {
var firstTrack = document.getElementById('track1');
var output = document.getElementById('output');
output.innerHTML = '<h3>Changing Track Kind:</h3>' +
'<p>Original kind: "' + firstTrack.kind + '"</p>';
firstTrack.kind = 'descriptions';
output.innerHTML += '<p>New kind: "' + firstTrack.kind + '"</p>';
}
</script>
</body>
</html>
The output displays track information when buttons are clicked −
Track Information: Track 1: Kind = "subtitles", Label = "English Subtitles" Track 2: Kind = "captions", Label = "English Captions" Track 3: Kind = "chapters", Label = "Chapters" (After clicking "Change First Track Kind") Changing Track Kind: Original kind: "subtitles" New kind: "descriptions"
Using Track Kind for Accessibility
Different track kinds serve specific accessibility purposes. Here is how to implement them effectively −
Example − Multiple Track Types
<!DOCTYPE html>
<html>
<head>
<title>Accessibility Track Types</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.track-info {
margin: 10px 0;
padding: 10px;
border-left: 4px solid #007bff;
background: #f8f9fa;
}
</style>
</head>
<body>
<h2>Accessible Video with Multiple Track Types</h2>
<video controls width="400">
<source src="tutorial.mp4" type="video/mp4">
<!-- Subtitles for different languages -->
<track kind="subtitles" src="tutorial-en.vtt" srclang="en" label="English">
<track kind="subtitles" src="tutorial-es.vtt" srclang="es" label="Español">
<!-- Captions with sound effects -->
<track kind="captions" src="tutorial-captions.vtt" srclang="en" label="English Captions">
<!-- Audio descriptions for visually impaired -->
<track kind="descriptions" src="tutorial-descriptions.vtt" srclang="en" label="Audio Descriptions">
<!-- Chapter markers for navigation -->
<track kind="chapters" src="tutorial-chapters.vtt" srclang="en" label="Chapters">
</video>
<div class="track-info">
<strong>Subtitles:</strong> Display spoken dialogue in different languages
</div>
<div class="track-info">
<strong>Captions:</strong> Include dialogue plus sound effect descriptions
</div>
<div class="track-info">
<strong>Descriptions:</strong> Provide audio descriptions of visual content
</div>
<div class="track-info">
<strong>Chapters:</strong> Enable navigation through video sections
</div>
</body>
</html>
Common Use Cases
The track kind property is commonly used in the following scenarios −
Dynamic Track Switching − JavaScript can check track kinds to present appropriate options to users based on their accessibility needs.
Content Management − Applications can programmatically organize tracks by type for easier management and display.
Accessibility Compliance − Ensuring proper track kinds helps meet WCAG guidelines for video content accessibility.
Multi-language Support − Combining different track kinds with language codes provides comprehensive international support.
Conclusion
The Track kind property is essential for creating accessible media experiences. It allows developers to programmatically identify and manage different types of text tracks, ensuring that videos serve users with diverse accessibility needs. Proper use of track kinds like subtitles, captions, descriptions, chapters, and metadata enhances both usability and compliance with accessibility standards.
165 Views
