Overview

There are many ways to interact between the video and webpage.  When a variable is set, it fires what we call a “data” event.  In this example, we are going to add an event listener to our “viewer” object which will fire when any new variables are set or changed.  From this event, we can check to see if the variable we set is present and contains the expected value.

Let’s see how this works.

Steps

  1. Create a new text annotation
  2. Click Edit
  3. Click More
  4. Click Link
  5. Within the “Javascript” text box, set a variable
  6. Click Submit
  7. On your webpage, you will now be able to listen for a new data event containing that variable once it has been set.
hapyak.viewer({
    apiKey: "9ce017788cae460fa172",
    projectId: 17399,
    resetVariables: true,
    player: ytPlayer,
    playerType: "youtube",
    width: 720,
    height: 405,
    autoplay: false,
     onload: function(viewer) {
       hapyak_viewer = viewer;
       viewer.addEventListener('data', function(variables) {
           if (variables && variables.cookie === true) {
             showCookie();
           } else if (variables && variables.cookie === false) {
             hideCookie();
           }
       });
     }
});

After validating that the variable is present and has been set to the expected value, you may then call any onpage function as normal

Part 1: Click Here

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.

Did this answer your question?