Horje
What is HTML <track> Tag

Definition and Usage

The <track> tag specifies text tracks for <audio> or <video> elements.

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

Tracks are formatted in WebVTT format (.vtt files).


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Optional Attributes

Attribute Value Description
default default Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
kind captions
chapters
descriptions
metadata
subtitles
Specifies the kind of text track
label text Specifies the title of the text track
src URL Required. Specifies the URL of the track file
srclang language_code Specifies the language of the track text data (required if kind="subtitles")

Global Attributes

The <track> tag also supports the Global Attributes in HTML.


Event Attributes

The <track> tag also supports the Event Attributes in HTML.


How to create HTML <track> Tag

It is A video with subtitle tracks for two languages.

index.html
Example: HTML
<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output should be:

How to create HTML <track> Tag

How to add HTML <track> default Attribute on HTML <track> Tag

Definition and Usage

It is A video with two subtitle tracks. "English" subtitle is the default.

The default attribute is a boolean attribute.

When present, it specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.

Note: There must only be one <track> element with a default attribute per <media> element.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<track src="subtitles_en.vtt" default>
index.html
Example: HTML
 <video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video> 

Output should be:

How to add HTML <track> default Attribute on HTML <track> Tag

How to add HTML <track> kind Attribute on HTML <track> Tag

It is A video with two subtitle tracks.

index.html
Example: HTML
 <video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output should be:

How to add HTML <track> kind Attribute on HTML <track> Tag

How to add HTML <track> label Attribute on HTML <track> Tag

It is A video with two subtitle tracks, both with a label defined.

Definition and Usage

The label attribute specifies the title of the text track, and is used by the browser when listing available text tracks.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

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

Attribute Values

Value Description
label Specifies the title of the text track
index.html
Example: HTML
 <video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output should be:

How to add HTML <track> label Attribute on HTML <track> Tag

How to add HTML <track> src Attribute on HTML <track> Tag

It is A video with two subtitle tracks.

Definition and Usage

The required src attribute specifies the URL of the track file.

Tracks are formatted in WebVTT format (.vtt files). 


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<track src=URL>

Attribute Values

Value Description
URL Specifies the URL of the track
index.html
Example: HTML
 <video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output should be:

How to add HTML <track> src Attribute on HTML <track> Tag

How to add HTML <track> srclang Attribute on HTML <track> Tag

It is A video with two subtitle tracks.

Definition and Usage

The srclang attribute specifies the language of the track text data.

This attribute is required if kind="subtitles".

Tip: To view all available language codes, go to our Language code reference.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

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

Attribute Values

Value Description
language_code Specifies a two-letter language code that specifies the language of the track text data
index.html
Example: HTML
 <video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output should be:

How to add HTML <track> srclang Attribute on HTML <track> Tag




html track

Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Single Articles
How to create HTML <track> TagHTML Tag
How to add HTML <track> default Attribute on HTML <track> TagHTML Tag
How to add HTML <track> kind Attribute on HTML <track> TagHTML Tag
How to add HTML <track> label Attribute on HTML <track> TagHTML Tag
How to add HTML <track> src Attribute on HTML <track> TagHTML Tag
How to add HTML <track> srclang Attribute on HTML <track> TagHTML Tag

Read Full:
HTML Tag
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded:
3 weeks ago
Uploaded by:
Admin
Views:
61


Reffered: https://www.w3schools.com/tags/tag_track.asp

Share on: