logo

IRIS.TV

Iris.TV is a recommendation engine. When hooking THEOplayer to the IrisTV SDK, a UI will be overlayed 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

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

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 2.X license and library. If you don't have THEOplayer 2.X 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 2.X. You can read on this subject at the following pages:
Web SDK

Getting Started with the THEOplayer Web SDK

Android SDK

Getting started with the THEOplayer Android SDK

iOS SDK

Getting started with the THEOplayer iOS SDK

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:

iOS SDK

You need to include the IrisTV JS library. To do so in your 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:

iOS SDK

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

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. 

iOS SDK

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

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
Singapore
Barcelona