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 = {
"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:
| 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 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>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.
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 = "";