SUMMARY

• Overview
• Setting the player
  • The "player builder" object
  • The player parameters
  • The media parameters
• Setting the delegate
  • The "delegate builder" object
  • The delegate parameters
• Additional options
• Setting the scene
• Examples
  • Live demo here.
  • Example #1: simple interactivity setup
  • Example #2: manual setup progression
  • Example #3: adding interactivity on top of an already instanciated video player
  • Example #4: gathering information on the interactions that occured while a video is playing

Overview

"Experience" is the climax of the interactive video underlying processes. It brings in one "easy to deal with" class all the required stuff to manage the interactive video. It is a kind of "entry point" for developers who want to investigate more around the capabilities of the Adways interactive engine. It is a top level "public" tool to enhance productivity and help the setup of the interactivity in front of a video.

Live demo.

Setting the player

The "player builder" object

The player parameters

The media parameters

Setting the delegate

The "delegate builder" object

The delegate parameters

Additional options

Setting the scene

A scene is tied to a publication ID and the corresponding publication JSON.

Examples

Reminder:

• The static method "createExperience" is a helper that performs the "new" operation.
• There is a live demo here.
• Importing the Adways library is a pre-requisit:

  <script src="//dj5ag5n6bpdxo.cloudfront.net/adways/libs/interactive/loader.js"></script>
  

Example #1: simple interactivity setup

The "Example #1: quick and simple interactive video setup" on the "AdwaysLib - interactive" documentation home page shows the most simple and quick way to instanciate the interactivity. But it uses the createExperience static method. Here is how to manually perform the same operations:

// creates the new "Experience" object
var experience = new adways.interactive.Experience();
console.log("new experience created: "+experience.getExperienceID());
// sets where the player will have to be instanciated
experience.setPlayerContainer(domEelementOrDomId);
// sets the publication ID (ie: the interactivity id)
experience.setPublicationID("GSPfHsV");
// loads and builds everything
experience.load();

Example #2: manual setup progression

It is possible to avoid the use of the load method by manually orchestrating the setups progression:

// creates the new "Experience" object
var experience = new adways.interactive.Experience();
console.log("new experience created: "+experience.getExperienceID());
// sets where the player will have to be instanciated
experience.setPlayerContainer(domEelementOrDomId);
// sets the publication ID (ie: the interactivity id)
experience.setPublicationID("GSPfHsV");
//since requesting the data is an async process, building the objects will have to wait until its
// reception before starting:
experience.addEventListener(adways.interactive.Experience.Event.PUBLICATION_JSON_CHANGED, function(){
    if (experience.getPublicationJSON()!=null) {
        // builds the player from the data (asynchronous process)
        experience.buildPlayer();
        // builds the scene from the data
        experience.buildScene();
    }
});
// The delegate cannot be built before the player is. But since building the player is an async process
// (as for requesting the data), building the delegate has to wait for the player to be built:
experience.addEventListener(adways.interactive.Experience.Event.PLAYER_STATE_CHANGED, function(){
    if (experience.getPlayerState().valueOf()==adways.interactive.Experience.playerStates.BUILT) {
        // builds the delegate
        experience.buildDelegate();
    }
});
// gather the data of the publication (asynchronous process)
experience.requestPublicationJSON();

Example #3: adding interactivity on top of an already instanciated video player

Here, the engine is not responsible of loading the player. The interactivity is added on top of an already instanciated one.
Yes, it is possible to add any interactive scenario on top of any stream of a known player.
(Contact the team to know if your player is compatible)

    
<!-- standard HTML5 video player instanciation -->
<video id="video-player" style="width:600px;max-width:100%;" controls>
   <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
   <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
   Your browser does not support HTML5 video.
</video>

<script type="text/javascript">
// creates the new "Experience" object
var experience = new adways.interactive.Experience();
// sets the player helper constant corresponding to the existing player
experience.setPlayerClass("HTML5"); // adways.playerHelpers.HTML5 parameter is deprecated 
// sets the player API
// the argument is the javascript object that represents the player API
experience.setPlayerAPI(document.getElementById("video-player"));
// sets the publication ID (ie: the interactivity id)
experience.setPublicationID("GSPfHsV");
// loads and builds everything
experience.load();
</script>

Example #4: gathering information on the interactions that occured while a video is playing

The next example shows the most easiest way to be aware of the "user media route".
Before launching the load of everything, it is possible to add some "event listeners" that will be triggered as soon as something happens.

Creates the experience object:

var experience = new adways.interactive.Experience();
experience.setPublicationID("GSPfHsV");
experience.setPlayerContainer("adways-interactive-video");

Now, prior to calling the "load" method, define and add a set of callback methods:

• Being aware of the scene loading:

  // definning the callback
  var sceneStateChangedCB = function () {
      var s = "scene state changed: ";
      switch (experience.getSceneState().valueOf()) {
          case adways.interactive.Experience.sceneStates.EMPTY:
              s += "is now \"EMPTY\"";
              break;
          case adways.interactive.Experience.sceneStates.BUILDING:
              s += "is currently \"BUILDING\"";
              break;
          case adways.interactive.Experience.sceneStates.BUILT:
              s += "is now \"BUILT\" and available";
              break;
      }
      console.log(s);
  };
  // adding the event listener
  experience.addEventListener (adways.interactive.Experience.Event.SCENE_STATE_CHANGED, sceneStateChangedCB);
  

• Being aware of an action:

  var actionExecutedCB = function (event) {
      var s = "action executed: ";
      switch (arguments[0].getAction().getKind()) {
          case adways.hv.actionKinds.SEEK_TO:
              s += "SEEK_TO ("+event.getAction().getTime().valueOf()+" seconds)";
              break;    
          case adways.hv.actionKinds.ACTIVATION:
              var enrichment = event.getAction().getEnrichment();
              s += "enrichment ACTIVATION ("+enrichment.getName().valueOf()+" , "+enrichment.getEnrichmentId().valueOf()+")";
              break;    
          case adways.hv.actionKinds.PLAYPAUSE:
              s += "PLAY/PAUSE state changed to "+event.getAction().getPlayState().valueOf();
              break;    
          case adways.hv.actionKinds.URL:
              s += "URL opened ("+event.getAction().getURL().valueOf()+")";
              break;   
      }
      console.log (s);
  };
  experience.addEventListener(adways.interactive.Experience.Event.ACTION_EXECUTED, actionExecutedCB);
  

• Being aware of a user click on a content:

  var contentClickedCB = function (event) {
      var s = "content clicked. It belongs to the enrichment ";
      var enrichment = event.getContent().getEnrichment();
      s += enrichment.getName().valueOf();
      s += " of id ";
      s += enrichment.getEnrichmentId().valueOf();
      console.log(s);
  };
  experience.addEventListener(adways.interactive.Experience.Event.CONTENT_CLICKED, contentClickedCB);
  

• Being aware of a stat sent from on a content:

  var contentStatCB = function (event) {
      var statKey = event.getKey();
      var statValue = event.getValue();
      var s = "stat sent. Key : "+statKey+", value : "+statValue+". It belongs to the enrichment ";
      var enrichment = event.getContent().getEnrichment();
      s += enrichment.getName().valueOf();
      s += " of id ";
      s += enrichment.getEnrichmentId().valueOf();
      console.log(s);
  };                          
  experience.addEventListener(adways.interactive.Experience.Event.CONTENT_STAT, contentStatCB);
  

• Being aware of an enrichment open/close operation:

  var enrichmentActivationChangedCB = function (event) {
      var enrichment = event.getEnrichment();
      var s = "enrichment (";
      s += enrichment.getName().valueOf();
      s += " , ";
      s += enrichment.getEnrichmentId().valueOf();
      s += ") activation changed to: ";
      s += enrichment.getActivated().valueOf();
      console.log(s);
  };
  experience.addEventListener(adways.interactive.Experience.Event.ENRICHMENT_ACTIVATION_CHANGED, enrichmentActivationChangedCB);
  

And now it is possible to launch the experience's "load" method:

    
experience.load();