Iris.TV is a recommendation engine. When hooking THEOplayer to the IrisTV SDK, a UI will be overlaid over the default player UI which can be used to navigate through recommendations.
This guide describes how to do a custom IrisTV integration in THEOplayer.
Web SDK | Android SDK | iOS SDK | tvOS SDK | Android TV SDK | Chromecast SDK |
---|---|---|---|---|---|
Yes | Unverified through CSS/JavaScript injection* | Unverified through CSS/JavaScript* injection | No | Unverified through CSS/JavaScript injection* | N/A |
*CSS/JavaScript injection in the project is only possible with the legacy mobile SDKs (up to 4.12.X).
There are two prerequisites in order to continue with this guide:
-
You have a THEOplayer license and library. If you don't have THEOplayer yet, you can start your free trial here or contact your THEOplayer account manager.
-
You have some basic knowledge on how to use THEOplayer and have set up a working implementation with THEOplayer in it. You can read on this subject at the following pages:
Getting started on Android Legacy (4.12.x)
You need to include the IrisTV JavaScript library in your project:
Include the script tag right before where you include the THEOplayer.js library:
<script
type="text/javascript"
src="https://ovp.iris.tv/libs/adaptive/iris.adaptive.js"
></script>
-
Download the JavaScript library available at https://ovp.iris.tv/libs/adaptive/iris.adaptive.js
-
Follow these instructions and add it as a custom JS file in your project: How to add CSS or JavaScript files to an Android/iOS project
-
Download the JavaScript library available at https://ovp.iris.tv/libs/adaptive/iris.adaptive.js
-
Follow these instructions and add it as a custom JavaScript file in your project: How to add CSS or JavaScript files to an Android/iOS project
You need to include the JavaScript script tag referencing the file containing the custom integration code.
Include the script tag this right after where you include the THEOplayer.js library.
<script
type="text/javascript"
src="https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.js"
></script>
You can also add extra styling on top of the IrisTV UI:
<link rel='stylesheet' type='text/css'
href='https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.css' />
-
Download the JavaScript library available at https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.js
-
Follow these instructions to add custom JavaScript files in your project: How to add CSS or JavaScript files to an Android/iOS project
-
You can also add extra styling on top of the IrisTV UI downloading the following file (and integrating it too as explained in the guide linked at step 2): https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.css
-
Download the JavaScript library available at https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.js
-
Follow these instructions to add custom JavaScript files in your project: How to add CSS or JavaScript files to an Android/iOS project
-
You can also add extra styling on top of the IrisTV UI downloading the following file (and integrating it too as explained in the guide linked at step 2): https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.css
To start displaying the IrisTV UI, you have to call THEOplayerIrisTv() (from THEOplayer.iristv.js), and pass along the THEOplayer instance and your IrisTV configuration. For example:
<script>
...
var irisOptions = {
client_token: "51afa098ah",
platform_id: "5798d994ef995e0d18000176"
};
THEOplayerIrisTv(player, irisOptions);
</script>
The Web SDK code should be included in your Android (TV) project. The article at How to add CSS or JavaScript files to an Android/iOS project explains how you can add CSS and JS files to your project. The sample project at How to insert a button demonstrates this.
The Web SDK code should be included in your iOS project. The article at How to add CSS or JavaScript files to an Android/iOS project explains how you can add CSS and JavaScript files to your project. The sample project at How to insert a button demonstrates this.
In summary, to integrate IrisTV in THEOplayer, is as simple as including their SDK and some custom code in your project.
A live demo can be viewed at https://cdn.theoplayer.com/demos/iristv/iristv.html.
-
How to add CSS or JavaScript files to an Android/iOS project
-
https://iristv.atlassian.net/wiki/spaces/API/pages/263258113/THEO+Adaptive+Plugin: Iris.tv documentation - THEO adaptive plugin
-
https://iristv.atlassian.net/wiki/spaces/API/pages/38567965/Custom+Adaptive+Plugin : Iris.tv documentation - Custom adaptive plugin
-
http://www.iris.tv/: Iris.tv