label attribute | label property

Gets or sets the label attribute to create a user readable title for an audio, video, or text track.

This property is read/write.

HTML5 A vocabulary and associated APIs for HTML and XHTMLIE11

 

Syntax

HTML
<element label="sLabeltext" ... >

 

JavaScript
object.label = sLabeltext
sLabeltext = object.label

 

Property values

Type: string

A string that can be used to identify or title a track.

Standards information

Remarks

A label can be any identifying string. This string is displayed in the HTML5 video player. This example shows thelabels for "Spanish", "German", or "English" in the player:

HTML
Copy 

    <video id="video1" controls autoplay loop>
      <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" >
      <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 
      <track id="esTrack" src="estrack.vtt" label="Spanish" kind="subtitles" srclang="es">
      <track id="deTrack" src="detrack.vtt" label="German" kind="subtitles" srclang="de">
      HTML5 video not supported
    </video>

This property is supported by the track element in Internet Explorer 10.

Note  To create timed text files in both Web Video Text Track (WebVTT) and Timed Text Markup Language (TTML) formats, see HTML5 Video Caption Maker on the Windows Internet Explorer test drive site.
 

Examples

This example gets a TextTrackList from a video element, and displays the label assigned to each track.

HTML
Copy 


</head>
<body>
  <h1>Show tracks example</h1>
  <video id="video1" controls  >
    <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4">
    <track id="entrack" label="English subtitles" kind="captions" src="entrack.vtt" srclang="en" default>
    <track id="sptrack" label="Spanish subtitles" kind="captions" src="estrack.vtt" srclang="es">
    <track id="detrack" label="German subtitles" kind="captions" src="detrack.vtt" srclang="de">
  </video>
  <br />
  <button id="gettracks" >View text tracks</button>
  <div id="display"></div>

  <script>
    document.getElementById("gettracks").addEventListener("click", function () {
      var display = document.getElementById("display");
      display.innerHTML = "";
      var mytracks = document.getElementById("video1").textTracks;  //  get the textTrackList
      for (var i = 0; i < mytracks.length; i++) {
        display.innerHTML += (mytracks[i].label + "<br/>");  //append track label to inner text of <div>
      }
    }, false);
</script>

See also

track element
track object
AudioTrack
TextTrackList
VideoTrack
Make your videos accessible with Timed Text Tracks

 

 

Show: