Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Metadata track driven slideshow</title>
    <style type="text/css">
      #slideshow
      {
        /* set the iframe dimensions large enough to see */
        width:100%;
        height:400px;
      }
    </style>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded
        var tracks = document.getElementById("video1").textTracks;
        // Set the metadata track to be active
        tracks[1].mode = tracks[1].SHOWING;  // Make sure it's active
        var track2 = document.getElementById("control1"); // get the track object to add an event to

        //  This is the main event that drives the slide show
        track2.addEventListener("cuechange", function () {
          var myCues = this.track.activeCues;   // get an array of current cues.
          if (myCues.length > 0) {              // test to be sure there's cues
            document.getElementById("slideshow").src = myCues[0].text;  // get the text part of the cue (URL)
            // build an anchor tag and set it to the innerHTML of the span tag
            document.getElementById("currentURL").innerHTML = "<a href='" + myCues[0].text + "' target='_blank' >" + myCues[0].text + "</a>";
          }
        }, false);
      }, false);
</script>
</head>
  <body>
    <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="subtitles" srclang="en" default >
      <track id="control1" label="command track" src="control1.vtt" kind="metadata">
    </video>
    <div>URL: <span id="currentURL"></span></div>
    <iframe id="slideshow" ></iframe>
  </body>
</html>