HTML <track> tagS2C Home   « HTML <track> tag

Definition

The <track> element is a self closing tag which is used to define timed text tracks for captions, chapters, descriptions, metadata and subtitles.

The <track> tag was introduced in HTML5.

Example


<video controls src="../../pages/HD0405.mp4" width="200" height="200">
  <track src="../../pages/example_en.vtt" kind="subtitles" label="English subtitles" srclang="en">
  Sorry, your browser doesn't support embedded videos.
</video>

Video courtesy of MovieTOOLS

To see the subtitles make sure you turn them on in controls.

Contents of Example_en.vtt file


WEBVTT  

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

1
00:00:01.000 --> 00:00:03.000
Contents of example_en.vtt file

2
00:00:04.000 --> 00:00:07.000
Example_en.vtt file specified using 'track' element

3
00:00:08.000 --> 00:00:10.000
Using the 'track' element we can provide subtitles for video

Attributes

The following attributes can be used with the <track> tag.


<track> Specific Attributes
Attribute Value Description Example
defaultdefaultSpecifies a track is to be enabled if user preferences do not indicate a more appropriate one.

Only one track per parent node should be set as the default.		 

<track src="../pages/HD0405.mp4" default>;
kindSpecifies the kind of text track. 

<track src="../pages/HD0405.mp4" srclang="English"  
       kind="subtitles" src="../pages/HD0405.mp4">;
captionsTranscription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.
chaptersTracks intended for use from script.
descriptionsTextual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable.
metadataTracks intended for use from script.
subtitlesTranscription or translation of the dialogue, suitable for when the sound is available but not understood.
labeltextSpecifies a title for the track in a readable format. 

<track src="../pages/HD0405.mp4" 
       label="English subtitles">;
srcurlSpecifies the URL where the track is located. Required. 

<track src="../pages/HD0405.mp4">;
srclanglanguage_codeSpecifies the language of the text track which must be a valid BCP 47 language tag.

Mandatory when the kind attribute is subtitles.		 

<track src="../pages/HD0405.mp4" srclang="English"  
      kind="subtitles" src="../pages/HD0405.mp4">;
<u> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<track class="name">
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<track id="name">
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<track style="color:red;">
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<track title="Content info">
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<track accesskey="a">
tabindexSpecifies a tab order for the element. 

<track tabindex="1">
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<track dir="ltr">
<!-- The text will flow from right to left -->
<track dir="rtl">
langSpecifies a language code for the content of the element. 

<track lang="en">
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<track spellcheck="true">
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<track translate="no">
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<track contenteditable="true">
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<track draggable="true">
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<track hidden> 
<track hidden="hidden">
<track> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<track oncopy="go()">
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<track oncut="go()">
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<track onpaste="go()">
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<track ondrag="go()">
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<track ondragend="go()">
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<track ondragenter="go()">
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<track ondragleave="go()">
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<track ondragover="go()">
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<track ondragstart="go()">
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<track ondrop="go()">
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<track onblur="go()">
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<track onchange="go()">
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<track oncontextmenu="go()">
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<track onfocus="go()">
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<track oninput="go()">
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<track oninvalid="go()">
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<track onreset="go()">
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<track onselect="go()">
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<track onsubmit="go()">
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<track onkeydown="go()">
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<track onkeypress="go()">
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<track onkeyup="go()">
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<track onabort="go()">
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<track oncanplay="go()">
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<track oncanplaythrough="go()">
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<track oncuechange="go()">
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<track ondurationchange="go()">
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<track onemptied="go()">
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<track onended="go()">
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<track onloadeddata="go()">
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<track onloadedmetadata="go()">
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<track onloadstart="go()">
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<track onpause="go()">
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<track onplay="go()">
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<track onplaying="go()">
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<track onprogress="go()">
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<track onratechange="go()">
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<track onseeked="go()">
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<track onseeking="go()">
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<track onstalled="go()">
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<track onsuspend="go()">
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<track ontimeupdate="go()">
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<track onvolumechange="go()">
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<track onwaiting="go()">
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<track onclick="go()">
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<track ondblclick="go()">
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<track onmousedown="go()">
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<track onmousemove="go()">
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<track onmouseout="go()">
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<track onmouseover="go()">
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<track onmouseup="go()">
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<track onwheel="go()">
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<track onscroll="go()">
Window - NONE

Relevant HTML Tutorials

HTML Advanced - Audio & Video