Video Recommendation Player Plugins
      Back to home
      1. Knowledge Base and Documentation
      2. Video Recommendations
      3. Video Recommendation Player Plugins

      Akamai Media Player Plugin

      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