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 = {
        "mobile": ['https://an.facebook.com/v1/instream/vast.xml?placementid=TEST_PLACEMENT_ID&pageurl=test.com'],
        "desktop": ['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:

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 a bottom or top offset to the player when it's stickied to a bottom corner

As many sites have certain functions at 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".

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