van an nguyen

Update the document in sync with a media playing

Mixing JSON cue content with track and cue events, makes the synchronization of elements in the HTML document (while the video is playing) much easier.

Example of track event listeners that use JSON cue contents

Here is a small code extract that shows how we can capture the JSON content of a cue when the video reaches its start time. We do this within a cuechange listener attached to a TextTrack:

  1. textTrack.oncuechange = function (){
  2.     // “this” is the textTrack that fired the event.
  3.     // Let’s get the first active cue for this time segment
  4.     var cue = this.activeCues[0]; 
  5.     var obj = JSON.parse(cue.text);
  6.     // do something
  7. }

Here is a very impressive demo by Sam Dutton that uses JSON cues containing the latitude and longitude of the camera used for filming the video, to synchronize two map views: every time the active cue changes, the Google map and equivalent Google street view are updated.

Video synced with google map and google street map

Example of a cue content from this demonstration:

  1. {“lat”:37.4219276, “lng”:-122.088218, “t”:1331363000}

Cue events and cue content:

We can acquire a cue DOM object using the techniques we have seen previously, or by using the new HTML5 TextTrack getCueById() method. 

  1. var videoElement = document.querySelector(“#myvideo”);
  2. var textTracks = videoElement.textTracks; // one for each track element
  3. var textTrack = textTracks[0]; // corresponds to the first track element
  5. // Get a cue with ID=”wikipedia”
  6. var cue = textTrack.getCueById(“Wikipedia”); 

And once we have a cue object, it is possible to add event listeners to it:

  1. cue.onenter = function(){
  2.    // display something, play a sound, update any DOM element…
  3. };
  5. cue.onexit = function(){
  6.    // do something else
  7. };

If the getCueById method is not implemented (this is the case in many browsers, as at November 2015), we use the polyfill presented in the previous section:

  1.  // for browsers that do not implement the getCueById() method
  3.  // let’s assume we’re adding the getCueById function to a TextTrack object
  4.  //named “track”
  5. if (typeof track.getCueById !== “function”) {
  6.    track.getCueById = function(id) {
  7.      var cues = track.cues;
  8.      for (var i = 0; i != track.cues.length; ++i) {
  9.        if (cues[i].id === id) {
  10.          return cues[i];
  11.        }
  12.      }
  13.   };
  14.  }

Example that displays a wikipedia page and a google map while a video is playing

Try the example at JSBin

video synced with an iframe that shows external URLs and with a google map

HTML code extract:

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Example syncing element of the document with video metadata in webVTT file</title>
  6. </head>
  7. <body >
  8. <main>
  9. <video id=”myVideo” controls crossorigin=”anonymous” >
  10.    <source src=”https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4&#8243;
  11.            type=”video/mp4″>
  12.    …
  13.    </source>
  14. <track label=”urls track”
  15.         src=”https://&#8230;../SamuraiPizzaCat-metadata.vtt”
  16.         kind=”metadata” >
  17.  </track>
  18. </video>
  19.    
  20. </main>
  21.  
  22. <aside>
  23.      
  24. </aside>
  25. <h3>Wikipedia URL: <span id=”currentURL”> Non défini </span></h3>
  26.  
  28. …

JavaScript code:

  1. window.onload = function() {
  2.     var videoElement = document.querySelector(“#myVideo”);
  3.     var myIFrame = document.querySelector(“#myIframe”);
  4.     var currentURLSpan = document.querySelector(“#currentURL”);
  6.     var textTracks = videoElement.textTracks; // one for each track element
  7.     var textTrack = textTracks[0]; // corresponds to the first track element
  8.    
  9.     // change mode so we can use the track
  10.     textTrack.mode = “hidden”;
  11.     // Default position on the google map
  12.     var centerpos = new google.maps.LatLng(48.579400,7.7519);
  13.  
  14.     // default options for the google map
  15.     var optionsGmaps = {
  16.        center:centerpos,
  17.        navigationControlOptions: {style:
  18.                  google.maps.NavigationControlStyle.SMALL},
  19.        mapTypeId: google.maps.MapTypeId.ROADMAP,
  20.        zoom: 15
  21.     };
  22.  
  23.     // Init map object
  24.     var map = new google.maps.Map(document.getElementById(“map”),
  25.                                   optionsGmaps);
  26.  
  27.     // cue change listener, this is where the synchronization between
  28.     // the HTML document and the video is done
  29.     textTrack.oncuechange = function (){
  30.        // we assume that we have no overlapping cues
  31.        var cue = this.activeCues[0];
  32.        if(cue === undefined) return;
  34.        // get cue content as a JavaScript object
  35.        var cueContentJSON = JSON.parse(cue.text);
  37.        // do different things depending on the type of sync (wikipedia, gmap)
  38.        switch(cueContentJSON.type) {
  39.          case’WikipediaPage’:
  40.             var myURL = cueContentJSON.url;
  41.             var myLink = “<a href=\”” + myURL + “\”>” + myURL + “</a>”;
  42.             currentURLSpan.innerHTML = myLink;
  44.             myIFrame.src = myURL; // assign url to src property
  45.             break;
  46.          case ‘LongLat’:
  47.             drawPosition(cueContentJSON.long, cueContentJSON.lat);
  48.             break;
  49.        }
  50.    };
  51.  
  52.    function drawPosition(long, lat) {
  53.       // Make new object LatLng for Google Maps
  54.       var latlng = new google.maps.LatLng(lat, long);
  55.  
  56.       // Add a marker at position
  57.       var marker = new google.maps.Marker({
  58.           position: latlng,
  59.           map: map,
  60.           title:”You are here”
  61.       });
  63.       // center map on longitude and latitude
  64.       map.panTo(latlng);
  65.    }
  66. };

All the critical work is done by the cuechange event listener, lines 27-50. We have only the one track, so we set its mode to “hidden” (line 10)  in order to be sure that it will be loaded, and that playing the video will fire cuechange events on it. The rest is just Google map code and classic DOM manipulation for updating HTML content (a span that will display the current URL, line 42).

Leave a comment