Open In App

HTML | kind Attribute

Last Updated : 19 Jul, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <track> kind Attribute is used to specify the kind of the track for video and audio files. This is very useful if the listener or viewer is deaf.

Syntax:  

<track src="subtitles_en.vtt" kind="subtitles" srclang="en">

Attribute Value: It is either true or false which shows the default state of the track. By default, it is false.  

  • captions: It defines translation of dialogue and sound effects which is also suitable for deaf users.
  • metadata: It states content used by scripts but is not shown to users.
  • chapters: It defines chapter titles which is suitable to navigate the media resource.
  • subtitles: Display subtitles in a video and audio.
  • descriptions: It describes the textual description of the video or audio content.

Example 1: This example illustrates the <track> kind attribute with video element.  

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        HTML track kind Attribute
    </title>
     
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>HTML track kind Attribute</h2>
  
    <video width="420" height="240" controls>
        <source src="video1" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles"
                      srclang="en" label="English">
    </video>
</body>
 
</html>          


Output: 
 

Example 2:This example illustrates the use of <track> kind attribute with audio element. 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        HTML track kind Attribute
    </title>
     
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>HTML track kind Attribute</h2>
  
    <audio  controls>
        <source src="audiofile_name" type="audio/mp3">
         
        <track src="subtitles_en.vtt" kind="subtitles"
                      srclang="en" label="English">
    </audio>
</body>
 
</html>          


Output: 
 

Supported Browsers: The browser supported by HTML <track> kind Attribute are listed below: 

  • Google Chrome 23.0
  • Edge 12.0
  • Internet Explorer 10.0
  • Mozilla Firefox 31.0
  • Safari 6.0
  • Opera 12.1

 



Previous Article
Next Article

Similar Reads

HTML | kind Attribute
The HTML kind Attribute is used to specify the kind of the track. This attribute is only used in &lt;Track&gt; element. Syntax: &lt;track src="subtitles_en.vtt" kind="subtitles" srclang="en"&gt; Applicable: &lt;track&gt; Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; body { text-ali
1 min read
HTML | DOM Track kind property
The DOM Track kind property is used to set or return the value of the kind attribute of the track. The kind attribute is used to specify the kind of the track. Syntax: It is used to return the kind property. trackObject.kind It is also used to set the kind property. trackObject.kind = "captions|metadata|chapters|subtitles|descriptions" Value: It is
2 min read
How to specify the kind of marker to be used in the list in HTML5 ?
There are two types of lists in HTML, the first is an ordered list which is created using the &lt;ol&gt;&lt;/ol&gt; tag, and the second is an unordered list which is created using the &lt;ul&gt;&lt;/ul&gt; tag. Both of the lists should have a &lt;li&gt;&lt;/li&gt; tag to represent the data inside them. The ordered list represents the data in a coun
3 min read
How href attribute is different from src attribute in HTML ?
In HTML5, the href and src attributes play distinct roles in defining paths or URLs, each associated with specific HTML elements. The href attribute, commonly found in an anchor (&lt;a&gt;) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like &lt;img&gt; and &lt;script&gt;, specifies
1 min read
When to use the class attribute and the id attribute ?
The class attribute is used when multiple HTML elements share a common style or behaviour, allowing the application of a shared style to several elements. It promotes code reusability and is suitable for elements with similar characteristics. The id attribute is utilized when a unique identifier is needed for a specific HTML element. This identifie
1 min read
How to use the target attribute and the rel attribute in the &lt;a&gt; Tag ?
The target and rel attributes in the &lt;a&gt; (anchor) tag is used to control the behaviour of hyperlinks, specifying how the linked content should be opened and establishing relationships between the current and linked documents. Here's how to use these attributes: target Attribute:The target attribute determines where the linked content will be
2 min read
HTML | &lt;html&gt; xmlns Attribute
The HTML &lt;html&gt; xmlns Attribute is used to specify the xml namespace for a document. Important Note: This attribute is mainly required in XHTML, not valid in HTML 4.01, and optional in HTML 5. Syntax: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d
1 min read
HTML | scoped Attribute
The HTML scoped attribute is a boolean attribute that is used to specify that the styles only apply to this element's parent element and that element's child elements (not the entire document).Note : It is a deprecated attribute and it is not supported by HTML5. Supported tag: style Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head
1 min read
HTML | &lt;th&gt; valign Attribute
The HTML &lt;th&gt; valign Attribute is used to specify the vertical alignment of text content in a header cell. It is not supported by HTML 5. Syntax: &lt;th valign="top | middle | bottom | baseline"&gt; Attribute Value: top: It sets the table header content to top-align. middle: It sets the table header content to middle-align. bottom: It sets th
1 min read
HTML | &lt;col&gt; align Attribute
The HTML &lt;col&gt; align Attribute is used to set the horizontal alignment of text content inside the col element. It is not supported by HTML 5. Syntax: &lt;col align="left | right | center | justify | char"&gt; Attribute Values: left: It sets the text left-align. right: It sets the text right-align. center: It sets the text center-align. justif
1 min read