Player Tag API

Important! The Vidible product front end UI terminology "Playlist" equates to the name/parameter/value of "bid" or "BID" within the Vidible Player Tag API.  This is due to an update to better suit business terminology.  When dealing with data in relation to a "BID", know in fact that you are working with "Playlists".

 

Tags

IMPORTANT: Do not modify tag's body! Any undocumented changes may lead to unpredictable behavior or incorrect statistics.

Exceptions and additional features will be described beneath.

Provided tags are for documentation only and do not work if published.

Standard (Default)

This tag is typically best for owned and operated sites. 

<!-- TAG START { player: "Chamelion Player", owner: "Vidible", for: "Vidible" } -->
<div class="vdb_player vdb_5434f807e4b024ff7d5d43ea50d595ec0364e95588c77bd2">
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid=5434f807e4b024ff7d5d43ea/50d595ec0364e95588c77bd2.js"></script>
</div>
<!-- TAG END { date: 10/09/14 } -->
 
 

Static impression tracker

This tag is typically best for media buys. It has the smallest discrepancy with ad server counts. It requires that macros are passed to supply the URL where the tag is running and a cache buster.

<!-- TAG START { player: "Chamelion Player", owner: "Vidible", for: "Vidible" } -->
<div class="vdb_player vdb_5434f807e4b024ff7d5d43ea50d595ec0364e95588c77bd2" vdb_params="m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}">
    <img src="//trk.vidible.tv/trk/impression.gif?pid=5434f807e4b024ff7d5d43ea&bcid=50d595ec0364e95588c77bd2&m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}" style="width:0;height:0;padding:0;margin:0;border:0;position:absolute;"/>
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid=5434f807e4b024ff7d5d43ea/50d595ec0364e95588c77bd2_si.js?m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}"></script>
</div>
<!-- TAG END { date: 10/09/14 } -->
 
 

Friendly IFRAME isolated

This will run the player within an IFRAME, which will maximize isolation from the page. You will need to pass in the site URL and a cache buster. This should only be used for special circumstances.

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_52aed7c9e4b0f26cda1d51e152d08bcee4b09055bf77119650e403a2c1321e0931a07af4" vdb_params="m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}">
    <img src="http://trk.dev.vidible.tv/trk/impression.gif?bid=52aed7c9e4b0f26cda1d51e1&pid=52d08bcee4b09055bf771196&bcid=50e403a2c1321e0931a07af4&m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}" style="width:0;height:0;padding:0;margin:0;border:0;position:absolute;"/>
    <script type='text/javascript' src="http://cdn.vidible.tv/prod/tags/2014-01/bid=52aed7c9e4b0f26cda1d51e1/pid=52d08bcee4b09055bf771196/50e403a2c1321e0931a07af4_dfsi.js?m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}"></script>
</div>
<!--VIDIBLE TAG END-->
 
 
Static IFRAME isolated

This runs the player within an IFRAME. Unlike the friendly IFRAME tag, we hard code in the IFRAME and various sizing information, and as such it is the least flexible tag. If you update the size of the player you must retraffic the tag. You will need to pass in the URL and cache buster via macros. This should only be used in special circumstances.

<!--VIDIBLE TAG START-->
<img src="http://trk.dev.vidible.tv/trk/impression.gif?bid=52aed7c9e4b0f26cda1d51e1&pid=52d08bcee4b09055bf771196&bcid=50e403a2c1321e0931a07af4&m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}" style="width:0;height:0;padding:0;margin:0;border:0;position:absolute;"/>
<iframe id="vdb_52aed7c9e4b0f26cda1d51e152d08bcee4b09055bf77119650e403a2c1321e0931a07af4" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"
    style="width:640px;height:360px;"></iframe>
<script type="text/javascript">
    (function () {
    var frameUrl = "http://cdn.vidible.tv/prod/tags/2014-01/bid=52aed7c9e4b0f26cda1d51e1/pid=52d08bcee4b09055bf771196/50e403a2c1321e0931a07af4_sfsi.html?m.url=${REFERER_URL_ENC}&m.cb=${CACHEBUSTER}";
    if (window.vdbBidModifier && window.vdbBidModifier.query) {
    frameUrl += "&q=" + encodeURIComponent(window.vdbBidModifier.query);
    window.vdbBidModifier = undefined;
    }
    var frame = document.getElementById("vdb_52aed7c9e4b0f26cda1d51e152d08bcee4b09055bf77119650e403a2c1321e0931a07af4");
    frame.removeAttribute("id");
    frame.src = frameUrl;
    })();
</script>
<!--VIDIBLE TAG END-->
    

 

Tag modifications

Most common tag modifications may be done with player's add-on editor (before or after). Go to the Detail page for the player and click on Edit Add-Ons. 

By using the add ons, you will track your modifications within the portal, and it will be easier for you to keep track of what you have done with the tag. You will also get your modified script when you click on Copy Tag, so it can be very convenient.

Getting Player API object

Player API object won't be available for static IFRAME isolated tag type due to security browser limitations (XSS). 

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_52aed7c9e4b0f26cda1d51e152d08bcee4b09055bf77119650e403a2c1321e0931a07af4" id="vidible_player"> <!--Notice the 'id' parameter to identify the tag's container div element. Call it with any unique id on the page-->
    <script type='text/javascript' src="http://cdn.vidible.tv/prod/tags/2014-01/bid=52aed7c9e4b0f26cda1d51e1/pid=52d08bcee4b09055bf771196/50e403a2c1321e0931a07af4.js"></script>
    <script type='text/javascript'>
        function onPlayerReady(player) {
            //do something useful with player object
        }
 
        (function(div, cb){
            if (div.vdb_Player) {
                cb(div.vdb_Player);
            } else {
                var fn = arguments.callee;
                setTimeout(function(){ fn(div,cb); },0);
            }
        })(document.getElementById("vidible_player"), onPlayerReady);
    </script>
</div>
<!--VIDIBLE TAG END-->
 
 

Methods

The following table describes all of the available player methods:

Method Description Parameters
.version() Returns version of Vidible Player API (String) e.g. "14.01.b65"  
.updateBid() Dynamically updates currently playing bid. Side-effect: stops current playback if any bidModifier - JS object with query field
Query (String): Search string to modify the Bid

Example: player.updateBid("5b0e69af7985d80f2359a965")
.playVideoByIndex() Set which video in a playlist will playback first using it's position in the playlist array. Integer - pass the video position 0 and up

Example:
player.playVideoByIndex(0)
.setVideo() Coming soon
Override and set a new video in the Player.
type (String): Video ID.

Example:
player.setVideo("5b0e69af7985d80f2359a965")
.destroy() Destroys Vidible player and remove all created elements. Example: 
player.destroy() 
.addEventListener() Add an event listener for particular event

event - event name (String)

handler - function taking one argument holding event JS object of the player

type (String): Type of the event
data (Object): (Optional) Data related to this event

Example: 
player.addEventListener("vidible.VIDEO_PLAY", fireThisFunction)

.removeEventListener() Removes previously added event listener

event - event name (String)

handler - reference to handler function previously added with addEventListener() function

Example: 
player.removeEventListener() 

 

 

 

Player Control Methods:

Control Method Description Parameters
.play()

Playing the current video on the player

 

.pause()

pausing the video that is currently being played

 

.mute()

Mutes the video that is currently being played

 

.volume()

Setting the volume of the video to the given percent

-  Can be a number from 0 to 100 specifying the new volume percent, or a number from 0 to 1, while 0 is compliantly muted and 1 is full volume       

.seekTo()

Dynamically jumps to a given time in the video

time - A number greater then 0. If the parameter is greater then the playing video duration, the playhead will jump to the end of the video

.getPlayerInfo()

Object - A data object that has various info about the player at the time of method execution.  Some data elements include the following:

  • video: The raw video object that is currently playing (even while in ad). null in case of an error. 
  • video.metaData.duration can be used to get the video duration in milliseconds.
  • isAd: boolean.
  • playerStatus: "playing", "paused" or "error".
  • playheadTime: the current playhead position in seconds. null while in ad or in case of an error.
  • volume: the current volume scaled between 0 to 1. null in case of an error.
 



 

Events

Event Data

All of the events data contains these fields:

  • eventCode,
  • videoId: unique id of the video entity in Vidible portal.
  • title,
  • keywords: words that describe the content of the video
  • duration: duration of the video in seconds.
  • category: type of content (news, Entertainment, etc)
  • studio,
  • playerType: flash/html5

 In addition, some events has specific data, as shown in the table

Event Name Data Description

vidible.PLAYLIST_END
  Fired when the end of the bid videos is reached.
vidible.VIDEO_META   Fired when video metadata loaded.
vidible.VIDEO_START   Fired when video playback started.
vidible.VIDEO_TIMEUPDATE playheadTime, isPlayComplete, adType, isAd Fired when video time updated.
vidible.VIDEO_END playheadTime, isPlayComplete Fired when video playback ended.
vidible.VIDEO_PLAY isAd Fired when video or ad is playing or resume
vidible.VIDEO_PAUSE isAd Fired when video or ad paused
vidible.AD_META  

Fired when ad metadata loaded.

 

vidible.AD_START adType

Fired when ad playback started.

adType: is preroll/midroll

vidible.AD_END playheadTime, adType

Fired when ad playback ended.

adType: is preroll/midroll

vidible.PLAYER_READY  

Fired when player is ready on the page

vidible.VIDEO_DATA_LOADED pageUrl, isFirstVideo

Fired when the video data is loaded from server

  

Playlist (Bid) modification

static

The simplest playlist modification is to pass in the playlist id (BID), as an additional parameter in the request when building your players embed code.  See below the structure of this embed with the additional "bid" value inserted:

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_5407894ce4b061fe2c0e933650d595ec0364e95588c77bd2">
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/bid={playlist ID}/pid={player ID}/{company ID}.js"></script>
</div>
<!--VIDIBLE TAG END--

Below, with the alpha numeric value of the BID as a functioning player.  

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_52aed7c9e4b0f26cda1d51e152d08bcee4b09055bf77119650e403a2c1321e0931a07af4">
    <script type='text/javascript' src="/delivery.vidible.tv/jsonp/2014-01/bid=52aed7c9e4b0f26cda1d51e1/pid=52d08bcee4b09055bf771196/50e403a2c1321e0931a07af4.js"></script>
</div>
<!--VIDIBLE TAG END-->

For a more simplistic approach to modifying just the video or video list in a player please see Video(s) Modification below.

dynamic

Utilizing the vdbBidModifier you can create a dynamic query which can be passed to the player before run time.  You can use keywords or other information in the CMS to alter the query that will be used for the bid. For example, you could pass in keywords, length restrictions, topics, or anything else into the query, and this is what we will use for filling videos into the player.

Note that with this approach you do not need to get the player API object. You can simply put in the code as shown here ... which is easily done by clicking on Edit Add-ons and using the Before option.

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_52aed7c9e4b0f26cda1d51e152d08bcee4b09055bf77119650e403a2c1321e0931a07af4">
    <script type='text/javascript'>
        var vdbBidModifier = {
            query: "cms_id:48484848"
        };
    </script>
    <script type='text/javascript' src="http://cdn.vidible.tv/prod/tags/2014-01/bid=52aed7c9e4b0f26cda1d51e1/pid=52d08bcee4b09055bf771196/50e403a2c1321e0931a07af4.js"></script>
</div>
<!--VIDIBLE TAG END-->

 

 
 

Defining vdbBidModifier object variable with query field leads to getting modified bid with provided search string.

Field
Type
Description
query String Search string to modify the Bid
//... tag with getting API snippet
function onPlayerReady(player) {
    player.addEventListener(vidible.PLAYLIST_END, function() {
        player.updateBid({
            query:"cms_id:48484848"
        });
    });
}
 
//... tag with getting API snippet
 
 
 

Video(s) modification

static

This is the simplest approach for integrating CMS information to include a single video or a non dynamic video list in a Vidible player.  This tag modification is expected prior to loading the Vidible player in the DOM.  You must use the dynamic version of the Vidible player for this to work.  To select the dynamic version of the Vidible player, select from any one of the player options from the "player tag" drop down Standard or Static Impression.

Below is an example of our dynamic player:

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_5407894ce4b061fe2c0e933650d595ec0364e95588c77bd2">
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid=5407894ce4b061fe2c0e9336/50d595ec0364e95588c77bd2.js"></script>
</div>
<!--VIDIBLE TAG END-->

 

The change that must be made to the dynamic player is the addition of the video id(s) using the parameter "vid" after the player id and before the company id.  See the example below for data placement reference.

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_5407894ce4b061fe2c0e933650d595ec0364e95588c77bd2">
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid={player ID}/vid={video ID}/{company ID}.js"></script>
</div>
<!--VIDIBLE TAG END-->
 
 

 

You can also insert multiple videos into the "vid" parameter by using a comma to separate the values, for example:

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_5407894ce4b061fe2c0e933650d595ec0364e95588c77bd2">
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid={player ID}/vid={video 1, video 2, video3}/{company ID}.js"></script>
</div>
<!--VIDIBLE TAG END-->
 
 

Below is a basic example of a single video using real ID values for reference:

<!--VIDIBLE TAG START-->
<div class="vdb_player vdb_5407894ce4b061fe2c0e933650d595ec0364e95588c77bd2">
    <script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid=5407894ce4b061fe2c0e9336/vid=54058e7ce4b0e541a65ce82e/50d595ec0364e95588c77bd2.js"></script>
</div>
<!--VIDIBLE TAG END-->
 
 

Player Tag API Playground

Our playground showcases the event structure and various player APIs in action, to check it out click here.

Have more questions? Submit a request