Custom Adaptive Plugin

This details how to implement the Custom Adaptive Plugin JavaScript for HTML5 video players.

Custom OVP Integration – Get Started

1. Create a "plugin.js" file.

This will hold your player-specific requirements as well as customizations.

2. Add script tags to your HTML video page to load both your plugin.js file and the IRIS.TV Adaptive Library.

<script type="text/javascript" src="https://ovp.iris.tv/libs/adaptive/v2/iris.adaptive.js"></script>

<script type="text/javascript" src="your/plugin.js"></script>

In your plugin file

3. Implement "currentDuration()" function

Required

This should return the duration of the current video.

4. Implement "currentTime()" function

Required.

This should return the current playback position of the video.
Note: The two above functions must return the values in the same format (milliseconds or seconds)

5. Implement "play(videoObject)" function

This function should take the video object as an argument and from that argument, play that video in the player.
Note: If no play function is provided, the IRIS.TV Adaptive plugin will default to the standard HTML5 video player .load(url) and .play() functionality. This may not work as expected in all players.

6. Create an Object containing the configuration of the IRIS.TV Adaptive plugin.

Below is an example enabling all IRIS.TV UI features:

var irisOptions = {
  settings: {
    client_token: <CLIENT_TOKEN>, // REQUIRED
    platform: <VIDEO PLAYER PROVIDER>, // Ex: VideoJS, HTML5, Brightcove, Kaltura, etc. REQUIRED
    access_token: <ACCESS_TOKEN>, // Optional. Adaptive Plugin has a fallback access token that can be used.
	api_url: '//api.iris.tv', // Optional. Only necessary if you would like to use a specific, non-default URL.
    ssl: true, // If you would like all calls to the IRIS api to be sent over SSL, please set to true. Default: false (http:). Optional.
    platform_id: <PLATFORM_ID>, // Identifying ID from your IRIS feed. This should be the platform_id of the initial video. REQUIRED
	player_id: <HTML player id>, // REQUIRED.  
    start_up_next: true, // Would you like the upNext feature at the beginning of the video? 
	start_up_next_text: "UP NEXT:", // The heading to be displayed on the start UpNext widget. 
    end_up_next: true, // What about the end? 
	end_up_next_text: "UP NEXT:", // The heading to be displayed on the end UpNext widget.
  },
  player_elements: {
    video_player: video_player, // Recommended if video_player element is different from the HTML element. Optional.
  }, 
  iris_buttons: {
    thumbs_up: true, // would you like the thumbs_up button? 
    thumbs_down: true, 
    skip_forward: true, 
    skip_back: true, 
	skip_on_thumbs_down: true // would you like the player to skip the current video if a user clicks thumbs_down?
  }
}

7. Initialize IRIS.TV Plugin with Options.

var IrisEngine = initializeIrisPlugin(irisOptions);

8. Register your custom functions.

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

Sample Javascript:

var irisOptions = {

      settings: {

        number: 5,

        platform: "videojs", // optional

        access_token: <ACCESS TOKEN>,

        client_token: <CLIENT_TOKEN>,

        api_url: '//api.iris.tv', // optional (should only be used if you would like to use the non-default API-url

        ssl: true, // optional (determines whether to make API calls, load assets, etc. over http or https,

        player_version: 'videojs', // optional

        start_up_next: true, // optional. Creates the "Up Next" block at the beginning of a video

        end_up_next: true, // optional. Creates the "Up Next" block at the end of a video

        player_id: <HTML ID of the Player Element>,

        platform_id: <PLATFORM_ID>

      },

      iris_buttons: { // optional. determines whether to show iris UI elements.

        thumbs_up: true,

        thumbs_down: true,

        skip_forward: true,

        skip_back: true

      },

      player_elements: {

        video_player: videojs(player_id)

      },

      debug: true, // for development only. Logs additional information in the JS console.

      global: 'irisPlayer' // optional. Sets a global var accessible through the JS console.

    }


function currentTime(id){

  try {

    return videojs.getPlayers()[id].currentTime();

  }

  catch (err) {

    console.log(err);

    return 0

  }

}

// Create currentDuration() function that gets the currentDuration of the current video. In VideoJS's case, we have added an [id] argument to grab a specific video player in the case that there are multiple players on a single page.

function currentDuration(id) {

  try {

    return videojs.getPlayers()[id].duration();

  }

  catch (err) {

    console.log(err);

    return 0

  }

}

 

// Make the IrisEngine variable global if you would like to access it in other pages or the DOM  

IrisEngine = initializeIrisPlugin(irisOptions);

IrisEngine.registerFunction("currentTime", currentTime);

IrisEngine.registerFunction("currentDuration", currentDuration);

And in the HTML, you would add two script tags to reference the iris.adaptive.min.js file and the videojs.plugins.js

<script src="//ovp.iris.tv/libs/adaptive/v2/iris.adaptive.js" type="text/javascript"></script>

<script src="videojs.plugin.js" type="text/javascript"></script> <!-- link to your own plugin file -->

Example VideoJS Plugin Implementation

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

https://s3.amazonaws.com/ovp.iris.tv/shared/docs/example-videojs-doc.html