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); ``` |
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 --> |
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