CodesJava

Easy learning with example program codes

track HTML

HTML <track> Tag

To specify time-based text tracks for a media file, the HTML <track> tag is used as a child element of <audio> and <video> elements. Subtitles, captions, or any other form of text can thus be added by this tag which is displayed when a media file plays. It was introduced in HTML5.

Syntax:

<track src=" " kind=" " srclang=" " label=" ">

Example:

<!DOCTYPE html>  
<html>  
<body>  
 <h2>Example of HTML <track> Tag:</h2>  
<video width="320" height="240" controls>
  <source src="horse.mp4" type="video/mp4">
  <track src="horse.vtt" kind="subtitles" srclang="en" label="English">
</video>
</body>  
</html>

Steps to create a WEBVTT file for <track> tag:

  1. Open a text editor.
  2. On the first line of the editor write WEBVTT.
  3. A blank line is then left.
  4. The time duration is specified in a proper format.
  5. Numbering and CSS can also be added.
  6. The required text is then entered.
  7. Repeat the steps 3 to 5 until it is finished.
  8. The file is saved with the .vtt extension.
  9. The WEBVTT file is ready to use.

Tag specific Attributes:

AttributeValueUses
defaultdefaultUsed to instruct that the track will be enabled if the another track is no indicated to be more appropriate by the user’s preferences.
kindcaptions

chapters

descriptions

metadata

subtitles

Used to define the kind of the text track.
labeltextUsed to define the title of the text track.
srcURLUsed to define the URL of the track file and is a required attribute.
srclanglanguage_codeUsed to define the language of the track text data and is a required attribute if kind=”subtitles”.

Global Attributes:

The HTML Global attributes are supported by the HTML <track> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <track> tag.

Supporting Browser:

Chrome, IE, Firefox, Opera and Safari.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status