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. “Edit”
  3. “More”
  4. “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

Did this answer your question?