Versions Compared

Old Version 17

changes.mady.by.user Zachary Stockton

Saved on

compared with

New Version Current

changes.mady.by.user Richie Hyden

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


Custom OVP Integration – Get Started


Markdown
highlightStylegithub
1. Create `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 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 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 Adaptive plugin. 
  - Below is an example enabling all IRIS UI features: 
    ```json
    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 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: 


Code Block
languagejs
themeConfluence
titlevideojs.plugin.js
  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);

...

Code Block
languagexml
  <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.

...