HTML - kind Attribute

The HTML kind attribute is used to specify the kind of text track for the audio/video. The <track> element is used within the <audio> and <video> element to specify the subtitles, captions files, any other text files that will visible when the media is playing.

The <track> element specifies the timed text tracks for audio and video elements. Without the <track> element, you can’t see the captions, subtitles, or other text for the video or audio media when the media is playing.

Syntax

Following is the syntax for HTML kind attribute −

<track kind = "value">

Example

In the following example, we are going to use the HTML kind attribute with the track element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'kind' attribute</title>
</head>
<body>
   <!--HTML 'kind' attribute-->
   <h3>Example of the HTML 'kind' attribute</h3>
   <video width="300" controls>
      <source src="https://samplelib.com/lib/preview/mp4/sample-20s.mp4">
      <track kind="subtitles" srclang="en" label="English">
   </video>
   <p>'track' element is used to specify subtitles, caption files that should be visible when media is playing.</p>
</body>
</html>

On running the above code, the output window will pop up displaying the video on the webpage.

Example

Considering the another scenario, where we are going to use the kind attribute with the track element of the audio.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'kind' attribute</title>
</head>
<body>
   <!--HTML 'kind' attribute-->
   <h3>Example of the HTML 'kind' attribute</h3>
   <audio controls>
      <source src="https://samplelib.com/lib/preview/mp3/sample-6s.mp3">
      <track kind="subtitles" srclang="en" label="English">
   </audio>
   <p>'track' element is used to specify subtitles, caption files that should be visible when media is playing.</p>
</body>
</html>

When we run the above code, it will generate an output consisting of the audio file displayed on the webpage.

html_attributes_reference.htm
Advertisements