Interactivity Viewer Plugin

In this topic, you will learn about using the interactivity plugin to allow usage of Brightcove Interactivity functionality.

Introduction

Brightcove Interactivity permits you to add annotations to videos that add functionality like:

  • Chapters
  • Sentiment (ratings)
  • Overlays and call to actions
  • Polls
  • Branching

For these annotations to function, the Interactivity Viewer Plugin must be added to the Brightcove Player you are using. This is done in the PLAYERS module. In the left-side navigation click Interactivity, then check the Enable interactivity checkbox. This installs the plugin.

enable interactivity

Implement using code

Although most likely you use the UI to load the plugin and implement annotations, you can manually load the plugin. First you have to include the plugin code:

<script src="https://players.brightcove.net/videojs-interactivity-viewer/2/videojs-interactivity-viewer.min.js">

You then initialize the by calling it (highlighted):

<video-js id="myPlayerID" 
  data-account="1507807800001" 
  ...</video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
    
<script>
  videojs.getPlayer('myPlayerID').ready(function () {
    var myPlayer = this;
    myPlayer.interactivityViewer();
  });
</script>

There no CSS that needs to be linked in for this plugin.

Embed code details

There are three types of embedded code for Brightcove Interactivity. Those being:

  • Projects
  • Templates
  • Experiences

The code used for each is quite different, with details following.

Projects

  • iFrame: &interactivityProjectId=64132eeb95e5ed0017610e83
  • JavaScript: data-interactivity-project-id="64132eeb95e5ed0017610e83"

Template

The template is applied to the video itself, so you do not see any references to the Interactivity Template in neither the iframe or JavaScript code.

Experiences

  • iFrame (a code block is included here as there are numerous references to the Interactivity Experience): 
    <div style="position: relative; display: block; max-width: 100%;">
  <div id="interactivity_embedded_experience_63fe5a64859355001da01044" style="padding-top: 56.255;">
    <iframe src="https://player.interactivity.brightcove.com/latest/experience/f04531eb8a6849dfbc1c480fb8ed7507?embed_experience=true"
      frameborder="0"
      allowfullscreen
      webkitallowfullscreen
      mozallowfullscreen
      style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"></iframe>
  </div>
</div>
<script type="application/javascript" src="https://player.interactivity.brightcove.com/latest/embedded_experience.js"></script>
  • Landing Page: https://player.interactivity.brightcove.com/latest/experience/f04531eb8a6849dfbc1c480fb8ed7507