Overview
This library is written in JavaScript and contains everything to add a clickable overlay or any content that you want to add on top of your "interactive video".To comunicate with the interactive video (i.e the engine), the content context uses a adways.content.HVBridge singleton named adways.hvBridgePool. This singleton represents a pool of communication bridges between the content and the interactive engine/main video. Since a content of an enrichment is generally instanciated in a iframe, there is a need for a mechanism that establish a bidirectionnal communication between the interactive engine entities and the content. Currently, the entities controlable from within the content are:
- the main video (play, pause, seek to, playhead time, etc.)
- the enrichments (open, close, etc.)
- the scene
Each of these objects has a "mirror" one inside the content that reflects its state and let you calling methods on it, in the same way as you generally call a method on an object. The mirror is reponsible of:
- correctly transmitting the order by automatically choosing the best way yo achieve this (with the "messaging" API as an exemple).
- bringing you its states (whether the current enrichment is opened or not, etc)
Example : How to instantiate the adways.content.HVBridge singleton and communicate with the interactive video engine
First of all, Adwayslib.js must be included
<script src="//d1xswutoby7io3.cloudfront.net/content/js/Adways-content/1.0.0/release.Adways-min.js"></script>
To start a communication between the engine (the interactive video) and the content, the bridge must be connected
/* * Check if adways.hvBridge is ready. * If adways.hvBridge is not ready add an adways.hv.bridge.events.READY event listener */ if (adways.hvBridge.isReady()) hvBridgeReadyCB(); else adways.hvBridge.addEventListener(adways.hv.bridge.events.READY, hvBridgeReadyCB);
Once the bridge is ready, the connection with the enrichement can be established
/* Get enrichment state and interact with it */ var enrichment = adways.hvBridge.getCurrentEnrichment(); /* * If enrichment is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var enrichmentConnectedCB = function () { console.log("enrichment connected"); /* Get enrichment current activation state (openned or closed) */ enrichment.getActivated().addEventListener(adways.type.evt.BOOLEAN, function(e){ /* Here, activation state can be accessed by the disptacher of the event : */ console.log("is activated (dispatcher method) : "+e.getDispatcher().valueOf()); /* or, directly by the enrichment getActivated method */ console.log("is activated (getActivated method) : "+enrichment.getActivated().valueOf()); }); /* method to close the enrichment */ enrichment.close(); }; if(enrichment.isConnected()) enrichmentConnectedCB(); else { enrichment.addEventListener(adways.hv.bridge.events.CONNECTED, enrichmentConnectedCB); enrichment.connect(); }
Connection with content can be established
/* Get content state and interact with it */ var content = adways.hvBridge.getCurrentContent(); /* * If content is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var contentConnectedCB = function () { console.log("content connected"); }; if(content.isConnected()) contentConnectedCB(); else { content.addEventListener(adways.hv.bridge.events.CONNECTED, contentConnectedCB); content.connect(); }
Connection with P2S SceneController can be established to get video state
/* Get video state */ var p2s = adways.hvBridge.getP2S(); /* * If p2s is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var p2sConnectedCB = function () { console.log("p2s connected"); /* get video current time */ p2s.addEventListener(adways.resource.events.CURRENT_TIME_CHANGED, function(e){ /* Here, current time can be accessed by the disptacher of the event : */ console.log("current time (dispatcher method) : "+e.getDispatcher().getCurrentTime().valueOf()); /* or, directly by the SceneController getCurrentTime method */ console.log("current time (getCurrentTime method) : "+p2s.getCurrentTime().valueOf()); }); /* get video current play state */ p2s.addEventListener(adways.resource.events.PLAY_STATE_CHANGED, function(e){ /* Here, playstate can be accessed by the disptacher of the event : */ console.log("play state (dispatcher method) : "+e.getDispatcher().getPlayState().valueOf()); /* or, directly by the SceneController getPlayState method */ console.log("play state (getPlayState method) : "+p2s.getPlayState().valueOf()); /* * Both return adways.resource.playStates.PLAYING when video is playing * and adways.resource.playStates.PAUSE when video is paused */ }); }; if(p2s.isConnected()) p2sConnectedCB(); else { p2s.addEventListener(adways.hv.bridge.events.CONNECTED, p2sConnectedCB); p2s.connect(); }
Connection with S2P SceneController can be established to interact with video
/* Interact with video */ var s2p = adways.hvBridge.getS2P(); /* * If s2p is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var s2pConnectedCB = function () { console.log("s2p connected"); /* seek to 10 seconds */ s2p.setCurrentTime(10, true); /* Play video */ s2p.play(true); /* Pause video */ s2p.pause(true); }; if(s2p.isConnected()) s2pConnectedCB(); else { s2p.addEventListener(adways.hv.bridge.events.CONNECTED, s2pConnectedCB); s2p.connect(); }
Here is the full sample demo
<script src="[PATH_TO_ADWAYSLIB.JS]"></script> <script> var hvBridgeReadyCB = function () { /* Get enrichment state and interact with it */ var enrichment = adways.hvBridge.getCurrentEnrichment(); /* * If enrichment is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var enrichmentConnectedCB = function () { console.log("enrichment connected"); /* Get enrichment current activation state (openned or closed) */ enrichment.getActivated().addEventListener(adways.type.evt.BOOLEAN, function(e){ /* Here, activation state can be accessed by the disptacher of the event : */ console.log("is activated (dispatcher method) : "+e.getDispatcher().valueOf()); /* or, directly by the enrichment getActivated method */ console.log("is activated (getActivated method) : "+enrichment.getActivated().valueOf()); }); /* method to close the enrichment */ enrichment.close(); }; if(enrichment.isConnected()) enrichmentConnectedCB(); else { enrichment.addEventListener(adways.hv.bridge.events.CONNECTED, enrichmentConnectedCB); enrichment.connect(); } /* Get content state and interact with it */ var content = adways.hvBridge.getCurrentContent(); /* * If content is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var contentConnectedCB = function () { console.log("content connected"); }; if(content.isConnected()) contentConnectedCB(); else { content.addEventListener(adways.hv.bridge.events.CONNECTED, contentConnectedCB); content.connect(); } /* Get video state */ var p2s = adways.hvBridge.getP2S(); /* * If p2s is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var p2sConnectedCB = function () { console.log("p2s connected"); /* get video current time */ p2s.addEventListener(adways.resource.events.CURRENT_TIME_CHANGED, function(e){ /* Here, current time can be accessed by the disptacher of the event : */ console.log("current time (dispatcher) : "+e.getDispatcher().getCurrentTime().valueOf()); /* or, directly by the SceneController getCurrentTime method */ console.log("current time (getCurrentTime) : "+p2s.getCurrentTime().valueOf()); }); /* get video current play state */ p2s.addEventListener(adways.resource.events.PLAY_STATE_CHANGED, function(e){ /* Here, playstate can be accessed by the disptacher of the event : */ console.log("play state (dispatcher method) : "+e.getDispatcher().getPlayState().valueOf()); /* or, directly by the SceneController getPlayState method */ console.log("play state (getPlayState method) : "+p2s.getPlayState().valueOf()); /* * Both return adways.resource.playStates.PLAYING when video is playing * and adways.resource.playStates.PAUSE when video is paused */ }); }; if(p2s.isConnected()) p2sConnectedCB(); else { p2s.addEventListener(adways.hv.bridge.events.CONNECTED, p2sConnectedCB); p2s.connect(); } /* Interact with video */ var s2p = adways.hvBridge.getS2P(); /* * If s2p is not connected then add an adways.hv.bridge.events.CONNECTED event listener * and connect it. */ var s2pConnectedCB = function () { console.log("s2p connected"); /* seek to 10 seconds */ s2p.setCurrentTime(10, true); /* Play video */ s2p.play(true); /* Pause video */ s2p.pause(true); }; if(s2p.isConnected()) s2pConnectedCB(); else { s2p.addEventListener(adways.hv.bridge.events.CONNECTED, s2pConnectedCB); s2p.connect(); } } /* * Check if adways.hvBridge is ready. * If adways.hvBridge is not ready add an adways.hv.bridge.events.READY event listener */ if (adways.hvBridge.isReady()) hvBridgeReadyCB(); else adways.hvBridge.addEventListener(adways.hv.bridge.events.READY, hvBridgeReadyCB); </script>