IRIS.TV

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.

Table of Contents

• SDKs

• How to integrate the player with Iris.TV

  • Prerequisites
  • Set-up a working THEOplayer
  • Include the IrisTV SDK
  • Include the custom integration
  • Initialize THEOplayerIrisTv
• Conclusion
• Sample application
• Resources

SDKs

How to integrate the player with Iris.TV

Prerequisites

There are two prerequisites in order to continue with this guide:

1. 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.
2. You have some basic knowledge on how to use THEOplayer. You can read on this subject at the following pages:

Web SDK

Getting Started on Web

Android Legacy (4.12.x) SDK

Getting started on Android Legacy (4.12.x)

iOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x)

Getting started on iOS

Set up a working THEOplayer

This will not be covered in this guide. You can read on this subject at the getting started pages linked, per SDK, in the prerequisites section.

Include the IrisTV SDK

Web SDK

You need to include the JavaScript (JS) script tag referencing the IrisTV SDK. You could do this right before where you include the THEOplayer.js library.

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

Android SDK

You need to include the IrisTV JavaScript library. To do so in your Android project:

• download the JS 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

Legacy iOS/tvOS SDK (4.12.x)

You need to include the IrisTV JS library. To do so in your iOS project:

• download the JS 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

Include the custom integration

Web SDK

You need to include the JS script tag referencing the file containing the custom integration code. You could do 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'>
</link> 

Android SDK

You need to include the custom integration code. To do so in your Android project:

• download the JS library available at https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.js
• follow these instructions to add custom JS 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): https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.css

Legacy iOS/tvOS SDK (4.12.x)

You need to include the custom integration code. To do so in your iOS project:

• download the JS library available at https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.js
• follow these instructions to add custom JS 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): https://cdn.theoplayer.com/demos/iristv/THEOplayer.iristv.css

Initialize THEOplayerIrisTv

Web SDK

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>

Android SDK

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.

Legacy iOS/tvOS SDK (4.12.x)

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 JS files to your project. The sample project at How to insert a button demonstrates this.

Conclusion

In summary, to integrate IrisTV in THEOplayer, you have to include their SDK and some custom code.

Sample application

A live demo can be viewed at https://cdn.theoplayer.com/demos/iristv/iristv.html.

Resources

• Getting Started on Web
• Getting started on Android Legacy (4.12.x)
• Getting started on iOS
• 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