Always make sure that the players JavaScript file is loaded before you start using its API if using non-async embed code.
<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>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.
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>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>The "adTagUrl" node will accept an array of ad tags. With this in place, your player will go through them in a waterfall fashion until one of them returns a valid ad.
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>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>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.
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.
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>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>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>The above code will add a 30px bottom offset to the sticky player. Percentage values are also accepted for example: "inviewBottomOffset": "20%".
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);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=insecureJust add the above text to the end of your ad tag and the player will setup Google IMA SDK to load in insecure mode.
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=20By 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.
By default this timeout is set to 15 seconds.
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": trueAn 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.
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 = "";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>Make sure that the player you are using has its sticky option enabled and that your player is set to autoplay.
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>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 defaultThe player has to have the "Make sticky" option enabled in its player settings area for these methods to work.
If you want to control the player's sticky behavior from the start and disable the auto-sticky behavior the player utilizes, then make sure to call $bp('myDiv').SlideInView.manualForced = true; when the player is initialized and ready for API manipulation.
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>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