Advanced

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>

Remove player and load custom content after an ad is displayed in the player

With the below code you can show an ad and load custom content after the ad is finished.

<script>
    var unit = $bos("myDiv", {"id":"PLAYER_ID","width":"640","height":"360"}); 
    unit.add(['adError', 'adEnd'], onAdEnd); 
    function onAdEnd() { 
        unit.remove(['adError', 'adEnd'], onAdEnd); 
        console.log("LOAD YOUR CUSTOM CONTENT HERE"); 
    }
</script>

The above code uses a Brid outstream unit to simulate this implementation as no video content is required.

---

Remove player if no ad is found or after an ad ends display

Use the following code snippet to remove the player if no ad is found in your VAST response. The implementation below takes into consideration both if your VAST template returns an empty VAST response or if it errors out for any reason.

<script>
    function do_on_error(){
        $bp('myDiv').destroy(); //Remove player and all dependencies
        alert('error fired'); //Add custom code here
    }

    function do_on_adend(){
        $bp('myDiv').destroy(); //Remove player and all dependencies
        alert('ad end'); //Add custom code here
    }

    function player_ready() {
            $bp('myDiv').add('adEnd', do_on_adend); // adEnd fires each time an ad ends (even if it errors out or doesn't exist)
            $bp('myDiv').add('adError', do_on_error); // adError fires only if an ad errors out, this includes empty VAST responses
        }

    $bp("myDiv", {"id":"PLAYER_ID","width":"480","height":"270","video":"VIDEO_ID"}, player_ready);
</script>

---

Set a custom ad with the API

Use the code snippet below to instruct the player to use a custom ad. In the demo below we set a custom ad tag URL as the source of the ad (URL returns a valid VAST template) and set it to appear as a mid-roll on the 20th second of the video.

    var Ad = {
        "adTagUrl": ['https://an.facebook.com/v1/instream/vast.xml?placementid=TEST_PLACEMENT_ID&pageurl=test.com', 'https://an.facebook.com/v1/instream/vast.xml?placementid=TEST_PLACEMENT_ID&pageurl=test.com'],
        "adType": "1",
        "adTimeType": "s",
        "overlayStartAt": null,
        "overlayDuration": null,
        "cuepoints": "20"
    }
    function foo() {
        $bp('ID_OF_PLAYER_DIV').setAd(Ad,'video');
    }

Explanation of valid paramaters you can use when setting an ad:

Param	Value	Description
adType	0	Pre roll
	1	Mid roll
	2	Post roll
	3	Overlay
adTimeType	s	Time in seconds
	%	Percentage based time setting
overlayStartAt	int	Set start time of overlay in seconds
overlayDuration	int	Set duration of overlay in seconds
cuepoints	int	Set cue points for mid rolls in seconds

You can also setup a custom ad directly through the players embed code.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script> 
<div id="myDiv" class="brid" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> </div>
<script type="text/javascript">
$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID",
 "Ad": [
        {
            "mobile": ['https://an.facebook.com/v1/instream/vast.xml?placementid=TEST_PLACEMENT_ID&pageurl=test.com'], //Will get called in succession on mobile and desktop if the desktop array is left empty.
            "desktop": ['https://an.facebook.com/v1/instream/vast.xml?placementid=TEST_PLACEMENT_ID&pageurl=test.com'], // Will get called in succession on desktop only
            "adType": "0", // Type 0 for pre roll
            "adTimeType": "s",
            "overlayStartAt": null,
            "overlayDuration": null,
            "cuepoints": null
        }
    ]
}); </script>

---

Adding a custom playlist source

To load a custom playlist into the player use the following snippet below.

<script>
    $bp('ID_OF_PLAYER_DIV').loadPlaylist('URL_TO_YOUR_CUSTOM_JSON_PLAYLIST');
</script>

---

Play a custom video source

To play a custom video source through the Brid player use the following code snippet.

<script>
    $bp('ID_OF_PLAYER_DIV').src('URL_TO_YOUR_VIDEO_FILE');
</script>

It's also possible to add custom video metadata to a video. For this operation please see the following code snippet.

<script>
    var source = {
    "name": "Blue Sea, Whales, Fishes and Sharks, BlueSea, Whales, Fishes and Sharks",
    "description": "Blue Sea, Whales, Fishes and Sharks",
    "image": "URL_TO_YOUR_SNAPSHOT",
    "source": {
        "sd": "http://cdn.brid.tv/ugc/materials/promo.mp4"       
    } 
    function foo() { 
        $bp('ID_OF_PLAYER_DIV').src(source); 
    }
</script>

Alternatively, you can use a custom embed code like this to load a custom source video file with its metadata.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script> 
<div id="myDiv" class="brid" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> </div>
<script>
    $bp("myDiv", { 
        "id": "PLAYER_ID", 
        "width": "640", 
        "height": "360", 
        "video": { 
        "name": "ENTER_VIDEO_TITLE", 
        "description": "ENTER_DESCRIPTION_OF_VIDEO", 
        "image": "ENTER_DIRECT_URL_TO_STARTING_SNAPSHOT", 
        "source": { 
        "src": "ENTER_DIRECT_URL_TO_MP4_FILE" 
        } 
    }});
</script>

---

Change player skin using the API

Use the code snippet below to change the players skin on command. The code below will change the player skin to a skin with the ID 170.

<script>
     $bp('ID_OF_PLAYER_DIV').changeSkin('170');
</script>

If you are looking to implement this and need a specific ID of a skin that you wish to use, please contact the Brid Support Team by opening a ticket.

---

Add a custom annotation (custom HTML element) with a click-through to the player.

To add a click-through to a video you can use the following code snippet.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"></div>
<script>
    function onReadyAnnotation() {
      console.log("onReadyAnnotation onReadyAnnotation onReadyAnnotation", this.el);
      var annotationDiv = document.createElement('div');
      annotationDiv.style.width = "100px";
      annotationDiv.style.height = "50px";
      annotationDiv.style.position = "absolute";
      annotationDiv.style.top = "0px";
      annotationDiv.style.left = "0px";
      annotationDiv.style.zIndex = "5";
      annotationDiv.style.backgroundColor = "#FFFFFF";
      annotationDiv.style.cursor = "pointer";

      annotationDiv.innerHTML = "Annotation";

      annotationDiv.addEventListener("click", function() {window.open("https://www.google.com",'_blank');}, false)

      this.el.appendChild(annotationDiv);
 }
    $bp("myDiv", {
        "id": "PLAYER_ID",
        "width": "640",
        "height": "360",
        "video": "VIDEO_ID"
    }, onReadyAnnotation);
</script>

The code above will create a custom DIV HTML element and position it in the top left corner of the player with a custom click-through.

---

Add click-through for video

To add a click-through to a video you can use the following code snippet.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"></div>
<script>
    function onReady() {
        $bp('myDiv').touch.add('click', function() {
            window.open('http://google.com', '_blank');
        });
    }
    $bp("myDiv", {
        "id": "PLAYER_ID",
        "width": "640",
        "height": "360",
        "video": "VIDEO_ID"
    }, onReady);
</script>

---

Display only one ad unit if multiple Brid ad units are located on a single page

This snippet will first call a Brid in-slide ad unit and if it doesn't get an valid ad served will call an in-content ad unit to try to display an ad.

<!-- DIV in which the in-content outstream unit should render. Note the ID of the DIV. -->
<div id="myDiv" class="brid" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> </div>

<!-- Reference to the outstream JS file-->
<script type="text/javascript" src="//services.brid.tv/player/build/brid.outstream.min.js"></script>

<!-- Code used for rendering the slider ad unit. -->
  <script type="text/javascript">

  // Call a function (customOnReady) which gets called once the unit is ready for API usage.
   $bos("Brid_12345", {"id":"AD_UNIT_ID","width":"480","height":"270"}, customOnReady);

   // This function checks if an ad is available for display in the slider unit. If no ad is found it calls the in-content unit intialization.
   function customOnReady() {
    this.add('adError', function() {

     // Call in-content unit intialization. Note the ID that is used from the DIV above.
     $bos("myDiv", {"id":"AD_UNIT_ID","width":"480","height":"270"});
    });
   }
  </script>

---

Add an offset to the player or outstream unit when it's stickied to a corner of your choice

As many sites have certain functions at for example, the bottom of a site, you may wish for the player to sticky to the bottom of your site but above some HTML elements. This option will allow that by adding the following parameter to your embed code - "inviewBottomOffset". You can also use the below parameters to further configure and tweak sticky player positioning.

Param	Description
inviewTopOffset	Set a top offset in pixels for the sticky player or outstream unit
inviewBottomOffset	Set a bottom offset in pixels for the sticky player or outstream unit
inviewLeftOffset	Set a left offset in pixels for the sticky player or outstream unit
inviewRightOffset	Set a right offset in pixels for the sticky player or outstream unit
closeButtonVerticalOffset	Set a vertical offset in pixels for the sticky player or outstream unit close "X" button
closeButtonHorizontalOffset	Set a horizontal offset in pixels for the sticky player or outstream unit close "X" button

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "inviewBottomOffset": "30px"});
</script>

---

Set a playlist of items via an external config

You can use the following example to set up your player to playback a playlist of video items via an external config.

Example usage:

<script src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>var playerConfig = {
  "id": "YOUR SITE ID",
  "playerId": "YOUR PLAYER ID",
  "playlist": {
    "Video": [{
      "title": "TITLE I",
      "image": "STARTING SNAPSHOT URL",
      "thumbnail": "URL TO THUMBNAIL",
      "videoId": "ARBITRARY VIDEO ID (OPTIONAL)",
      "duration": DURATION OF VIDEO IN SECONDS,
      "source": {
        "sd": "DIRECT URL TO SD RENDITION",
        "hd": "DIRECT URL TO HD RENDITION"
      }
    }, {
      "title": "TITLE 2",
      "image": "STARTING SNAPSHOT URL",
      "thumbnail": "URL TO THUMBNAIL",
      "videoId": "ARBITRARY VIDEO ID (OPTIONAL)",
      "duration": DURATION OF VIDEO IN SECONDS,
      "source": {
        "sd": "DIRECT URL TO SD RENDITION",
        "hd": "DIRECT URL TO HD RENDITION"
      }
    }, {
      "title": "TITLE 3",
      "image": "STARTING SNAPSHOT URL",
      "thumbnail": "URL TO THUMBNAIL",
      "videoId": "ARBITRARY VIDEO ID (OPTIONAL)",
      "duration": DURATION OF VIDEO IN SECONDS,
      "source": {
        "sd": "DIRECT URL TO SD RENDITION",
        "hd": "DIRECT URL TO HD RENDITION"
      }
    }]}}
var bridPlayer = $bp('myDiv', playerConfig);

---

Force insecure mode for VPAID ad display when using Google IMA SDK

Certain VPAID ads need to be pushed through an insecure (friendly) iframe when served through Google IMA SDK to display properly. You can force this insecure mode by adding the following string to your ad tag URL call.

Example usage:

&brid_vpaidmode=insecure

Just add the above text to the end of your ad tag and the player will setup Google IMA SDK to load in insecure mode.

---

Add a custom timeout to an ad tag

You can change the default timeout the player has for ad tags by adding the following param to the end of your ad tag URL.

Example usage:

&brid_adtimeout=20

By adding the above to your ad tag, you will tell the player to wait for 20 seconds before it considers a timeout for this ad tag.

---

Force load of players HLS plugin

If for any reason you need to force load the players HLS plugin, you can do this by adding the following parameter to the players embed code:

Example usage:

"forceHLS": true

An example use for this would be if you have redirect URL's to an HLS stream so our player cannot automatically detect if the video file is an HLS stream or not. With this parameter, you can tell the player that it should expect an HLS stream and thus it can playback your video.

---

Add a video click-through URL programmatically

Use the following code snippet to add or remove a video click-through URL via the player's JS API:

Example usage:

// Set a custom click-through URL
$bp("playerDiv").currentSource.clickthroughUrl = "http://www.google.com";

// Remove a click-through URL
$bp('playerDiv').currentSource.clickthroughUrl = "";

---

Force sticky behavior for ad display only

Use the following code snippet to force the player to sticky only if a valid ad is received by the player.

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "autoplayStickyAdOnly": true});
</script>

---

Force player display if "acts as outstream" is selected

Use the following code snippet to force the player to display no matter if the player recieves an ad or not. This option will only work if the option "acts as X outstream unit" is selected on the player level. It essentially forces the player to display instead of the basic functionality which is the player displaying only if an ad is present.

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "forcePlayerDisplay": true});
</script>

---

Force sticky player behavior programmatically

You can use the following code snippets to force a player to go in sticky mode or un-sticky it.

Example usage:

$bp('myDiv').SlideInView.transitionSpeed = 300;     // default value 300 - This is the animation sticky speed in ms. Set to 0 to remove animation  
$bp('myDiv').SlideInView.forceShow();           // Force the player to go into sticky mode   
$bp('myDiv').SlideInView.forceHide();            // Un-sticky the player
$bp('myDiv').SlideInView.manualForced = true;       // Force the player to go into "manual" sticky mode - this disables the auto-sticky behavior that the player uses by default

---

Force reset of ad frequency counter on page refresh

You can use the following parameter "resetFreqCounter": true/false to force a player to reset its ad frequency counter on every page refresh.

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "resetFreqCounter": true});
</script>

---

Force display of a Brid outstream unit or player under or in a specific HTML element

You can use the following parameters to create a custom implementation which will force an outstream unit to appear in a specific HTML element or after a user-defined one.

Example usage:

This will example will render the outstream unit inside a specified div.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.outstream.min.js"></script>
<script>
    $bos("myDiv", {"id":"OUSTREAM_UNIT_ID","width":"480","height":"270", "appendTo": "#myDiv"});
</script>

This will example will render the outstream unit inside after the 4th paragraph on the page.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.outstream.min.js"></script>
<script>
    $bos("myDiv", {"id":"OUSTREAM_UNIT_ID","width":"480","height":"270", "insertAfter": "p:nth-child(4)"});
</script>

You can use the following notation to select or define an HTML element - w3schools

---

Set custom share URL's and custom embed codes for sharing purposes

See below example on how to do this:

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","customShare": {
    "shareUrl" :"ENTER YOUR CUSTOM URL HERE YOU WANT TO SHARE",
    "embedCode" : "ENTER YOUR CUSTOM EMBED CODE HERE"
}});
</script>

---

Enable player intelligent sticky behavior

If this option is added into the player embed code, the player whenever in sticky mode, will intelligently try to hide itself whenever it senses that the sticky player will go over a display banner. It will return into sticky mode once it senses it can display again on the page once a user scrolls away from the display banner.

See below example on how to do this:

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","avoidBanners": true});
</script>

In addition to this if you want the player to return back to its initial position instead of moving away from the banner position, you can add the following param "avoidBannersToDefault": true to get this behavior.

Example usage:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","avoidBanners": true,"avoidBannersToDefault": true});
</script>

Enable player sticky direction

If set to "above", the player will go into sticky mode only if you scroll above the player and vice versa

Example:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","stickyDirection": "above/below"});
</script>

Force player to load audio files without a valid audio extension

You can force a Brid player to reproduce audio files without valid audio extensions by adding the following parameter to your embed code:

Example:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "force_play_unknown_extensions" : true});
</script>

---

Add a custom close button to your embedded Brid player

You can add a close button to your player which when clicked will remove the entire player from the web page. This custom implementation allows you to set a custom X close button on a player corner of your choosing, define when you want the close button to appear and hide it when/if the player is in sticky mode. See below example on how to use these custom parameters.

<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","closeButton": {
"position": "top-right", // top-right|top-left|bottom-right|bottom-left 
"show_on": "start", // ad_end|start|number_of_seconds 
"hide_when_sticky": true //true|false
}});
</script>