Akamai Media Player Player Plugin

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: {
        	access_token: '<ACCESS_TOKEN>',
	        player_id: '<HTML_PLAYER_ID>', 
    	    client_token: '<CLIENT_TOKEN>', 
        	platform_id: '<PLATFORM_ID>'
	    }
        // Additional configurations available, see below. 
	}; 
	loadIrisPlugin(irisOptions);
</script>

<access_token> is a value provided by IRIS.TV to enable authentication through the IRIS API

<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

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