This IRIS.TV Adaptive plugin documentation is specific for the Akamai Media Player - Premier. The latest player build and package information can be found here.

This install requires placing an HTML script tag pointing to the IRIS Adaptive Akamai plugin and initializing a plugin load within the HTML.

Getting Started

Add a script tags to load the IRIS Adaptive Plugin, Library, and CSS.

<script type="text/javascript" src="//ovp.iris.tv/plugins/akamai/iris-akamai.adaptive.min.css"></script>

<script type="text/javascript" src="//ovp.iris.tv/libs/adaptive/v2/iris.adaptive.js"></script>

<script type="text/javascript" src="//ovp.iris.tv/plugins/akamai/iris-akamai.adaptive.min.js"></script>

Initialize the IRIS Plugin with your desired configuration options. It is best practice to place this code within the `loadHandler()` after creating the akamai player.

<script type="text/javascript">
	var irisOptions = {
    	settings: {
	        player_id: '<HTML_PLAYER_ID>', 
    	    client_token: '<CLIENT_TOKEN>', 
        	platform_id: '<PLATFORM_ID>'
	    }
        // Additional configurations available, see below. 
	}; 
	loadIrisPlugin(irisOptions);
</script>

<client_token> is a value provided by IRIS.TV after the publisher’s content has been imported.

<platform_id> is the GUID of the initial asset. The GUID is taken from the publisher’s content feed.

<player_id> HTML element id of the player div used to instantiate the Akamai player

AMP Only Setting

<array_source:> set to "true" to set the additional metadata for new assets. This setting can affect playback based upon your feed and import settings

Configuration

For more information about customizable settings and features, please see: Adaptive Plugins

Modifying Button Appearance

IRIS offers CSS classes to further customize the thumbs_up, thumbs_down, skip_forward, and skip_back buttons in the Akamai control bar.

CSS Selectors for IRIS Buttons in the Akamai control bar:

/* The IRIS button's IDs are dynamic depending on the player id. 
   The following CSS selectors use the $= as a wildcard selector to grab the ID's of the specific icons */
div[id$=thumbs-up-custom]
div[id$=thumbs-down-custom]
div[id$=skip-forward-custom]
div[id$=skip-back-custom] 


/* all IRIS buttons contain the class */
.iris-custom-buttons

Can I change the appearance after a user clicks an icon?

Yes. Here is the selector for the "active" state of a button:

.iris-custom-buttons.iris-button-active

And the disabled state?

.iris-custom-buttons.iris-button-disabled

Browser not supported