Akamai Media Player

This details how to implement the Adaptive Plugin for Akamai Media Player.

Getting Started

Add 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.TV 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" button state: 

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

And the disabled state? 

Yes. Here's the selector for the "disable" button state:

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