Scenario 4: Using metadata tracks to show additional content

This sample uses the kind = metadata attribute value on a track object to provide a track of commands rather than captions. When the cue is retrieved, it contains a URL that is set as the source in an iframe rather than being displayed as a caption. A webpage associated with the video is displayed below the video as a slide show.

To ensure that both tracks are active, the textTracks property is used to return a list of all the tracks associated with the video object. Each track is checked to see if the kind attribute value equals "metadata". Metadata tracks are set to a value of HIDDEN, which doesn't display the text, but makes them active. While metadata tracks will never display in the video player, even if it has a mode set to SHOWING, the track still needs to be made active because the subtitle track is the default. As the video plays the metadata track cue text (URLs) are displayed in the iframe.

Code

<script type="text/javascript">

      // don't run this until all DOM content is loaded 
      document.addEventListener("DOMContentLoaded", function () {

       var tracks = document.getElementById("video1").textTracks;
       // Set the metadata track to active
       tracks[1].mode = tracks[1].HIDDEN;  // hidden but active 

       var track2 = document.getElementById("control1");
       track2.addEventListener("cuechange", function () {
         var myTrack = this.track;             // track element is "this" 
         var myCues = myTrack.activeCues;      // activeCues is an array of current cues.                                                    
         if (myCues.length > 0) {
           document.getElementById("slideshow").src = myCues[0].text;
         }
       }, false);
     }, false);  
         
    </script>

    <video id="video1" autoplay controls>
      <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4"
        type="video/mp4"/>
      <track id="track1" label="English captions" src="entrack.vtt"
        kind="caption" srclang="en" default >    
      <track id="control1" label="command track" src="control1.vtt"
        kind="metadata">
    </video>
  
    <iframe id="slideshow"></iframe>