label attribute | label property

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

This property is read/write.

HTML5 A vocabulary and associated APIs for HTML and XHTML

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 timed text 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:


    <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 not implemented for AudioTrack.

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 a Windows Store app using JavaScript test drive site.

Examples

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



</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

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

 

 

Show:
© 2014 Microsoft