Vidible Player Plugin HTML Installation

Overview: Details how to add the Vidible Adaptive plugin to the Vidible player via the HTML configuration.

Get Started

Include the following in your HTML

1. Load Iris Plugin by adding script tags in your HTML

<!-- load iris vidible plugin and adaptive library -->
<script type="text/javascript" src="https://ovp.iris.tv/plugins/vidible/v2/iris-vidible.adaptive.min.js"></script>
<script type="text/javascript" src="https://ovp.iris.tv/libs/adaptive/v2/iris.adaptive.js"></script>

2. Add the following function beneath your player tag in the HTML. For more information on how to add a callback to your video player, visit: https://help.aolonnetwork.com/hc/en-us/articles/210799503-Player-Tag-API#PlayerTagAPI-Tagmodifications

    <!-- TAG START { player: "HuffPo Iris Test Player - DO NOT DELETE", owner: "Huffington Post", for: "Huffington Post" } -->
    <div id="575891fee4b02ff4720e81cf" class="vdb_player vdb_575891fee4b02ff4720e81cf56000e19e4b0e4e194b84b31">
        <script type="text/javascript" src="//delivery.vidible.tv/jsonp/pid=575891fee4b02ff4720e81cf/56000e19e4b0e4e194b84b31.js"></script>
    </div>
    <!--  TAG END { date: 06/08/16 } --> 
    
    <script type="text/javascript">
      function onPlayerReady(player) {
          var irisOptions = {
            settings: {
              start_up_next: true,
              end_up_next: true,
              client_token: 'YOUR CLIENT TOKEN', 
              platform_id: 'YOUR VIDEO ID', 
              platform: 'vidible', 
              player_id: player.div.id   
            }, 
            iris_buttons: {
              skip_back: true, 
			  skip_forward: true, 
			  thumbs_up: true, 
			  thumbs_down: true
            }, 
            player_elements: {
              video_player: player
            },
            global: "irisPlayer",  
            custom: {
              company_key: 'YOUR COMPANY KEY'
            }
          }
          loadIrisPlugin(player, irisOptions);
        }
 
        (function(div, cb){
            if (div.vdb_Player) {
                cb(div.vdb_Player);
            } else {
                var fn = arguments.callee;
                setTimeout(function(){ fn(div,cb); },0);
            }
        })(document.getElementById("ID OF YOUR VIDEO PLAYER DIV"), onPlayerReady);
    </script>