How to Embed a Dynamic Player API Tag

The Dynamic Player API tag is alternative to the regular embed code as it provides you with the ability to change certain aspects of the Player without the need to access the Portal UI.

To use the Dynamic Player API you will need to perform the following stages:

 

 

Stage I - How to Link Your Webpage to our Player Delivery JavaScript

To link your webpage to the Player delivery JavaScript, perform the following steps:

  1. Go to your preferred text editor and open your webpage HTML file.
  2. Add the following JavaScript tag between your opening and closing <head> tags:
    <script src="https://cdn.vidible.tv/prod/player/js/latest/vidible-min.js"></script>
  3. Your HTML page should resemble the following example:
    <!DOCTYPE html>
    <html>

    <head>
        <script src="https://cdn.vidible.tv/prod/player/js/latest/vidible-min.js"></script>
    </head>

    <body>
    <!--This is where your webpage content is displayed-->
    </body>

    </html>

 

 

Stage II - How to Define a Dynamic Player API Tag

To define a Dynamic Player API tag, perform the following steps:

  1. Go to your preferred text editor and open your webpage HTML file.
  2. Create a <div> element in your webpage that will be used to hold your player object, and give it an ID. The <div> element should be placed between your opening and closing <body> tags.

    Note: In the following example we have named our <div> as "target".

    Your HTML page should resemble the following example:
    <!DOCTYPE html>
    <html>

    <head>
    <script src="https://cdn.vidible.tv/prod/player/js/latest/vidible-min.js"></script>
    </head>

    <body>
    <div id='target'></div>
    </body>

    </html>




  3. Add the following JavaScript Dynamic Player API tag into your web page between the opening and closing <body> tags, and after the <div> you previously created:
    <script>
    var player = vidible.player('TARGET_DIV_ID').setup({
    //Mandatory properties
    pid: 'PLAYER_ID', //My Player
    bcid: 'COPMANY_ID',
    videos: ['VIDEO_ID','VIDEO_ID'],
    //Or
    bid: 'PLAYLIST_OVERRIDE_ID',

    //Optional - macros
    'MACRO_NAME':'MACRO_VALUE'
    }).load();
    </script>

    Your HTML page should resemble the following example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.vidible.tv/prod/player/js/latest/vidible-min.js"></script>
    </head>

    <body>
    <div id="target"></div>

    <script>
    var player = vidible.player('TARGET_DIV_ID').setup({
    //Mandatory properties
    bcid: 'COMPANY_ID',
    pid: 'PLAYER_ID',
    videos: ['VIDEO_ID,VIDEO_ID'],
    //Or
    bid: 'PLAYLIST_OVERRIDE_ID',

    //Optional - macros
    'm.MACRO_NAME':'MACRO_VALUE'
    }).load();
    </script>
    </body>
    </html>
  4. Replace the "TARGET_DIV_ID" placeholder with the ID of the <div> where you want to inject the player into.

  5. Replace the "COMPANY_ID" placeholder with your Company ID number. This will control the access scope to your players and content accordingly.

    Note: If you do not know what your Company ID is, please see How to find your Company ID.

  6. Replace the "PLAYER_ID"placeholder with a Player ID number that is available under your Companies scope. You can only select players that are either owned by the defined or shared with the Company ID you have provided.

    Note: To obtain one of your Player ID numbers, please see How to find your Player ID.

  7. Optional: You can manually inject videos to be played by the player by specifying video IDs in the 'videos' array. To do so, simply replace the 'VIDEO_ID' placeholders in the videos array.

    Important! Make sure that each video ID is placed between their own set of quotation marks and are comma separated from each other.

    Note: You can enter a single/multiple video IDs into this array.

    Note: You can only provide Video IDs that your company is permitted to display.

  8. Optional: If your player has a Playlist attached to it via the Portal, you can provide different Playlist ID to override it by replacing the 'PLAYLIST_OVERRIDE_ID' placeholder.

    Important!
    Make sure that your Playlist IDs are placed between the quotation marks.


    Note: You can only provide Playlist IDs that your company is permitted to display.
  9. Optional: You can provide additional Player Macros by replacing the 'MACRO_NAME' and corresponding 'MACRO_VALUE' with any supported macro. 

    Important! Make sure each Macro name has the 'm.' prefix.

    Note: For further details on supported macros, please see Player tag supported Macro parameters


  10. When finished, save your webpage. Your Dynamic Player API Tag should resemble the following example: 

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.vidible.tv/prod/player/js/latest/vidible-min.js"></script>
    </head>

    <body>
    <div id="target"></div>

    <script>
    var player = vidible.player('target').setup({
    //Mandatory properties
    bcid: '56d5921ce4b0f5001ad44713',
    pid: '570f610fe4b020065ddd20cf',
    videos: ['57c57d8b00c8a327adadb3e9'],
    //Or
    bid: '574bfa36e4b01b559f32b4c6',

    //Optional - macros
    'm.playback':'autoplay',
    'm.responsive':'true',
    'm.initialVolume': 0.5
    }).load();
    </script>
    </body>
    <html>

 

 

 

Have more questions? Submit a request