videojs.js

IRIS.TV Adaptive Plugin This is an example implementation of a custom plugin. This example uses a videojs video player.

Get Started

Configuration

irisOptions is an Object that specifies the desired configuration of the IRIS player and plugin.

  var irisOptions = {
        settings: {

number is the number of recommended videos you would like to be returned by the IRIS API. Max 20.

Integer

          number: 5,

access_token is an IRIS provided auth token. For this token, please ask your Account Representative.

String

          access_token: 'ACCESS_TOKEN',

player_id refers to the HTML ID of the video player. This is necessary for the IRIS Adaptive Library to link into the player.

String

          player_id: 'my-video',

Optional. Default false. ssl determines whether requests will be made over http or https protocol.

Note: true = ‘https’, false = ‘http’

Boolean

          ssl: true,

Optional. Add the player_version parameter if you would like the IRIS Plugin to know a specific player version. Mostly helpful in debugging.

String

          player_version: 'videojs',

Optional. start_up_next determines whether you would like to show IRIS’s default “Up Next” feature at the START of the video, within the player element.

Note: true = show, false = do not show.

Note: CSS styling is customizable with the div[id$=start_next_slate] CSS Selector.

Boolean

          start_up_next: true,

Optional. end_up_next determines whether you would like to show IRIS’s default “Up Next” feature at the END of the video, within the player element.

Note: true = show, false = do not show.

Note: CSS styling is customizable with the div[id$=end_next_slate] CSS Selector.

Boolean

          end_up_next: true
        },

The iris_buttons property determines which of the IRIS UI elements to show in the player element.

Note: The CSS is customizable using the CSS Selectors div[id$=thumbs_up], div[id$=thumbs_down], div[id$=skip_forward], div[id$=skip_backward]

        iris_buttons: {
          thumbs_up: true, 
          thumbs_down: true, 
          skip_forward: true, 
          skip_back: true
        },

Optional. If set to true, additional console.logs will be shown. Boolean

        debug: true
      }

Define Required Functions

Necessary function that returns the current play head of the video (how many seconds have passed)

Argument: ‘ID’ String value. ID of the player.

Return Integer value of the number of seconds/milliseconds that have passed in the currently playing video. Note the return value must be in the same form as the currentDuration function as to properly gage progress percentage.

  function currentTime(id){
    try {
      return videojs.getPlayers()[id].currentTime();
    }
    catch (err) {
      console.log(err);
      return 0
    }
  }

Necessary function that returns the duration of the current video.

Argument: ‘ID’ String value. ID of the player.

Return Interger value of the duration of the current video. Note the return value must be in the same form as the currentTime function as to properly gage progress percentage.

  function currentDuration(id) {

    try {
      return videojs.getPlayers()[id].duration();
    }
    catch (err) {
      console.log(err);
      return 0
    }
  }

Instantiate Plugin and Register Functions

Instatiates IRIS plugin object.

Pass in irisOptions configuration Object.

  IrisEngine = initializeIrisPlugin(irisOptions);

Register necessary functions to the IRIS Plugin.

  IrisEngine.registerFunction("currentTime", currentTime);
  IrisEngine.registerFunction("currentDuration", currentDuration);

Other Functions

Register a play function that loads a video into the video_player and initializes playback. This function should accept an IRIS Asset object as an argument. var asset = { iris_id: "string", platform_id: "string", platform: "string", content_url: "string", title: "string", image_url: "string", }

If no ‘play’ function is registered to the IRIS Plugin, the plugin will use the default HTML5 functionality. This is an example.

  function play(asset) {
    var video = document.getElementById('my-video');
    var source = video.getElementsByTagName('source')[0];

    source.setAttribute('src', asset.content_url);

    video.load();
    video.play();
  };

Custom Events

The IRIS Adaptive Plugin uses internal events to assess player start and end. If you would like to override these events please follow the instructions below.

Register the event “ENDED” with the IRIS Plugin. This tells the plugin to listen for a custom “ENDED” event.

  IrisEngine.registerEvent("ENDED");

Add an event listener to your own event that calls IrisEngine.emit("ENDED")

  videojs('my-video').on("ended", function(){

The additional data is passed in to tell the IRIS Plugin that this particular event was thrown after the user watched to the end of the video (as opposed to a skip)

    IrisEngine.emit("ENDED", {type: "next_auto", percentageWatched: (currentTime() / currentDuration()).toFixed(2)});
  });

Register the event “ENDED” with the IRIS Plugin. This tells the plugin to listen for a custom “PLAYING” event.

  IrisEngine.registerEvent("PLAYING");

Add an event listener to your own event that calls IrisEngine.emit("PLAYING")

  videojs('my-video').on("playing", function(){
    IrisEngine.emit("PLAYING");
  });

THUMBS_UP and THUMBS_DOWN

If you would like to use the IRIS Plugin’s custom “thumb” functionality we offer two events THUMBS_UP and THUMBS_DOWN for your convenience. As an example:

Thumbs up will keep playing the current video and calculate new recommendations based off of the user input.

  document.getElementById('custom_thumbs_up_button').addEventListener('click', function(){
    IrisEngine.emit("THUMBS_UP");
  })

Thumbs down will automatically skip to the next video in the playlist and calculate new recomendations based off of the user input.

  document.getElementById('custom_thumbs_down_button').addEventListener('click', function(){
    IrisEngine.emit("THUMBS_DOWN");
  })

For a complete list of configuration options please see: https://iristv.atlassian.net/wiki/display/API/IRIS.TV+Adaptive+Plugin