Kaltura video player with a working VAST pre and postroll ad and custom video URLs, but not for DoubleClick - custom-url

Question

Did anyone figure out how to embed the kaltura video player with custom video urls?
It is supposed to look something like this:
<script>
var $ = jQuery;
</script>
<!-- Substitute {partner_id} for your Kaltura partner id, {uiconf_id} for uiconf player id -->
<script src="//OUR_LOCAL_SERVER/p/101/sp/10100/embedIframeJs/uiconf_id/23448200/partner_id/101"></script>
<div class="kaltura-player-wrap">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="videoPlayer" itemprop="video" intemscope itemtype="http://schema.org/VideoObject"></div>
</div>
<script>
(function($) {
var enableAds = true;
var enablePreroll = true;
var enableMidroll = false; //not implemented yet since kaltura doesn't really support it
var enablePostroll = false;
var adlimit = 2;
dbug = true;
var flashvars = {};
var adlock = 0;
var faillock = 0;
var adtimeout = 20000;
var playlist = sfp.nextVideo !== undefined;
var mediaProxy = {
'entry': {
"thumbnailUrl": sfp.thumbnail,
"name": sfp.title,
"description": "The+Mediterranean+diet+has+long+been+promoted+as+a+heart+healthy+way+of+eating.+But%2C+for+women%2C+ther",
"duration": sfp.duration
},
'sources': [{
"src": "http://v1.SOME_SITE.com/822ece3c-52f0-4daa-b2da-7ebf1c0ba354.ogg",
"type": "video/ogg;"
}, {
"src": "http://v1.SOME_SITE.com/822ece3c-52f0-4daa-b2da-7ebf1c0ba354.webm",
"width": "624",
"height": "352",
"bandwidth": "740352",
"type": "video/webm; codecs='vp8, vorbis'",
}, {
"src": "http://v1.SOME_SITE.com/822ece3c-52f0-4daa-b2da-7ebf1c0ba354.mp4",
"width": "640",
"height": "360",
"bandwidth": "1101824",
"type": "video/mp4; codecs='avc1.42E01E, mp4a.40.2'",
}]
}
/*
Append pre or post roll ad parameters to the flashvars.vast object
obj: has to be the flashvars.vast object
uri: the ad tag url, parsed from the XML response
*/
function appendAdsVAST(obj,uri){
if(enablePreroll){
var temp = {
"prerollUrl" : uri,
"prerollUrlJs" : uri, //enable support for mobile ads
"numPreroll" : "1",
"prerollStartWith" : "1",
"prerollInterval" : "1",
"preSequence" : "1",
}
}else if(enablePostroll){
var temp = {
"postrollUrl" : uri,
"postrollUrlJs" : uri, //enable support for mobile ads
"numPostroll" : "1",
"postrollStartWith" : "1",
"postrollInterval" : "1",
"postSequence" : "1",
}
}
for(var val in temp)
obj[val] = temp[val];
return obj;
}
/*
To be reworked
uri-link to the ad to be passed into optimatic
type - optimatic
yumenetworks
bnmla
doubleclick
*/
function buildVideoPlayer(uri, type) {
//overload to default ad type - doubleclick
if(type==null || type===undefined || type==false)
type = "doubleclick";
if (type=="bnmla") {
flashvars = {
"vast": {
"plugin" : true,
"position" : "before",
"timeout" : "30",
"relativeTo" : "PlayerHolder",
},
"skipBtn": {
"skipOffset" : "5",
"label" : "Skip Ad"
},
"adsOnReplay" : true,
"inlineScript" : false,
"ForceFlashOnDesktopSafari" : false,
}
flashvars.vast = appendAdsVAST(flashvars.vast,uri);
flashvars.noticeMessage = {};
} else if (type=="yumenetworks" || type=="optimatic") {
/*
VAST DoubleClick Ad and Companion
Link: http://player.kaltura.com/docs/kvast
*/
flashvars = {
"vast": {
"plugin" : true,
"position" : "before",
"timeout" : "30",
"relativeTo" : "PlayerHolder",
},
"skipBtn": {
"skipOffset" : "5",
"label" : "Skip Ad"
},
"adsOnReplay" : true,
"inlineScript" : false,
"ForceFlashOnDesktopSafari" : false,
}
flashvars.vast = appendAdsVAST(flashvars.vast,uri);
// mobile already defines time remaining until ad finishes, so no need to specify it again
// if(!kWidget.isMobileDevice())
// flashvars.noticeMessage = {
// "plugin" : true,
// "position" : "before",
// "text" : "Time remaining {sequenceProxy.timeRemaining|timeFormat}"
// }
// disable any message overlays on the ad
flashvars.noticeMessage = {};
} else if(false){ //disbale doubleclick for now
/*
DoubleClick for the DFP plugin
http://player.kaltura.com/docs/DoubleClick
*/
flashvars = {
/*
* Doubleclick not working with mediaproxy, use generic vast instead
*/
"doubleClick": {
"plugin": true,
"path": "http://cdnbakmi.kaltura.com/content/uiconf/ps/veria/kdp3.9.1/plugins/doubleclickPlugin.swf",
"adTagUrl": uri,
"leadWithFlash": true,
"disableCompanionAds": true,
},
// "vast": {
// "prerollUrl": uri,
// "numPreroll": "1",
// "prerollStartWith": "1",
// "prerollInterval": "1",
// "postSequence": "1",
// "timeout": "4",
// "storeSession": false,
// },
}
}else{
/*
Generic VAST for other providers
*/
flashvars = {
"vast": {
"plugin" : true,
"position" : "before",
"timeout" : "30",
"relativeTo" : "PlayerHolder",
},
"skipBtn": {
"skipOffset" : "5",
"label" : "Skip Ad"
},
"adsOnReplay" : true,
"inlineScript" : false,
"ForceFlashOnDesktopSafari" : false,
}
flashvars.vast = appendAdsVAST(flashvars.vast,uri);
}
/*
For now diable ads on mobile, unless the type is optimatic, which does work now
Kaltura's Tremor, Adap.tv, YuMe, and FreeWheel plugins are not currently HTML5-compatible.
*/
if (kWidget.isMobileDevice() && type!="optimatic"){
flashvars = {};
dbug && console.log("Ads disabled on mobile, unless it's optimatic. Disabling ads");
}
/*
Ad response is empty, dont load any ads
*/
if(uri==""){
flashvars = {};
dbug && console.log("Ads link empty. Disabling ads");
}
/*
Erase left bottom corner watermark on the video
*/
flashvars.watermark = {
plugin: false
}
// flashvars.skipBtn = {
// "skipOffset": "1",
// "label": "Skip Ad"
// }
/*
* ads seem to have their own timers
*/
// flashvars.noticeMessage = {
// "text": "Advertisment {sequenceProxy.timeRemaining|timeFormat}"
// }
flashvars.forceMobileHTML5 = true;
/*
Set up custom video sources
*/
mediaProxy.preferedFlavorBR = -1;
flashvars.mediaProxy = mediaProxy;
/*
Enable hover controls
*/
flashvars.controlBarContainer = {
"plugin" : true,
"hover" : true
}
/*
Disable autoplay on mobile only
*/
flashvars.autoPlay = !kWidget.isMobileDevice();
/*
Enable debugging when needed,
send cross domain headers to prevent console warnings,
prevent ads form playing after video starts from beginning
*/
flashvars.adsOnReplay = true;
flashvars.enableCORS = true;
flashvars.debugMode = false;
flashvars.debugLevel = 0;
flashvars.autoMute = false;
kWidget.embed({
'targetId': 'videoPlayer',
'wid': '_101',
'uiconf_id': '23448200',
'KalturaSupport.LeadWithHTML5':true,
'EmbedPlayer.NativeControls':true,
'EmbedPlayer.CodecPreference' : 'webm',
'flashvars': flashvars,
'readyCallback': function(playerId) {
//initiate click events for the next video on the playlist page
if(playlist)
initiateNextVideo(playerId);
//initiate click events for the dropdown on the playlist page
if(playlist)
initiatePlaylistDropdown(playerId);
var kdp = $('#' + playerId).get(0);
/*
Force autoplay in case of an error on page
Only if it is a preroll ad
*/
if(!kWidget.isMobileDevice() && enablePreroll)
kdp.sendNotification("doPlay");
/*
Ad error events catches
Ads will be skipped automatically on this event, but need to disable the timeout
function [faillock] from rebuilding the player.
*/
kdp.kBind('adErrorEvent', function( qPoint ){
dbug && console.log("\n\n\n\nadErrorEvent\n\n\n\n");
faillock = 0;
// rebuildPlayerWithoutAds(playerId);
});
kdp.kBind('adLoadError', function( qPoint ){
dbug && console.log("\n\n\n\adLoadError\n\n\n\n");
faillock = 0;
rebuildPlayerWithoutAds(playerId);
});
kdp.kBind('mediaError', function( qPoint ){
dbug && console.log("\n\n\nmediaError\n\n\n");
});
kdp.kBind('entryFailed', function( qPoint ){
dbug && console.log("\n\n\nentryFailed\n\n\n");
});
/*
Safeguard against failure - skip to the video if ads fail to play
Enable ad lock check if the ad did start. Wait for it to start playing for 10
seconds and skip it if it doesn't start in this time (since it probably failed to load)
*/
if(!kWidget.isMobileDevice() || type=="optimatic")
kdp.kBind('adStart', function( qPoint ){
dbug && console.log("\n\n\nAd started buffering");
adlimit -= 1;
faillock = 1;
setTimeout(function(){
if(faillock==1){
dbug && console.log("Ad failed, skipping");
// in case if it is a postroll ad and a playlist page, we skip to the next
// video and hope that this time the ad plays.
// else reload the video with no ads
if(playlist && enablePostroll){
rebuildNextVideoElement();
rebuildCurrentVideoElement();
rebuildPlayer(playerId);
}else
rebuildPlayerWithoutAds(playerId);
}
},adtimeout);
});
// enable ad lock check if the ad did start
if(!kWidget.isMobileDevice() || type=="optimatic")
kdp.kBind('onAdPlay', function( start ){
dbug && console.log("Ad started playing");
//disable timeout that will rebuild the video player
faillock = 0;
});
// fire when ad is finished playing
if(enablePreroll)
kdp.kBind('adEnd', function( qPoint ){
adlock += 1;
dbug && console.log("Ad ended. Initiating playlist dropdown.");
});
/*
Since kaltura doesnt have a way to distinuish between
the start of a video or an ad, we need a workaround with counters. ALso
we need to have 2 ways of distinuishing video/ad start end events,
for pre and post roll ads.
*/
kdp.kBind('playbackComplete', function(eventData) {
if(playlist && enablePreroll){
//ad finished playing, and then the video
if(adlock==3){
dbug && console.log("Ad and video finished. Rebuilding player");
adlock = 0;
//update current video element
rebuildCurrentVideoElement();
rebuildNextVideoElement();
rebuildPlayer(playerId);
return;
//there was no ad on this page, so only the video played
}else if(adlock==0){
dbug && console.log("Video finished. Rebuilding player");
adlock = 0;
//update current video element
rebuildNextVideoElement();
rebuildCurrentVideoElement();
rebuildPlayer(playerId);
return;
//the ad finished
}else if(adlock==1){
dbug && console.log("Ad finished.");
}
adlock += 2;
}else if(playlist && enablePostroll){
adlock += 2;
//ad finished playing, and then the video
if(adlock==3){
dbug && console.log("Ad ad video finished. Rebuilding player");
adlock = 0;
//update current video element
rebuildCurrentVideoElement();
rebuildNextVideoElement();
rebuildPlayer(playerId);
return;
//there was no ad on this page, so only the video played
}else if(adlock==2){
dbug && console.log("Video finished. Rebuilding player");
// only rebuild the video if we reached the ad limit because
// in this case noa ds will be loaded after the video, which
// will prevent it from catching the ad end event and reloading the player
adlock = 0;
//update current video element
rebuildNextVideoElement();
rebuildCurrentVideoElement();
rebuildPlayer(playerId);
return;
}
}
});
// fire when ad starts playing
if(enablePostroll)
kdp.kBind('adEnd', function( qPoint ){
adlock += 1;
});
}
});
// delete the video element from DOM and reinitiate later because it
// looked like it made the ads break less often
kWidget.destroy("videoPlayer");
/*
We have reached the max number of times we can display an ad
*/
if(adlimit <= 0){
flashvars.vast = {};
dbug && console.log("Ads play count reached their limit. Disabling ads");
}
// reinitiate kWIdget video player with new settings
kWidget.embed({
'targetId': "videoPlayer",
'wid': '_101',
'uiconf_id': '23448200',
'flashvars': flashvars,
});
}
/*
Sort ad types so that the least broken ones are served first
*/
function sortAdTypes(data){
$xml = $(data);
var types = {};
$xml.find("VASTAdTagURI").each(function(){
var link = $(this).text();
var url = $.getQuery(link,"pageURL");
var isOptimatic = link.indexOf("optimatic.com") != -1;
var isYume = link.indexOf("yumenetworks.com") != -1;
var isBNMLA = link.indexOf("bnmlaX.com") != -1 || link.indexOf("bnmla.com") != -1;
if(isYume)
types.yumenetworks = link;
else if(isBNMLA)
types.bnmla = link;
else if(isOptimatic && url != 0 && url != "[INSERT_PAGE_URL]")
types.optimatic = link;
else
types.other = link;
});
return types;
}
/*
Get the least broken ad type from the sorted at types
types: array of ad links
*/
function selectAdType(types){
if(types==null)
return false;
return types.yumenetworks ? "yumenetworks" :
types.bnmla ? "bnmla" :
types.optimatic ? "optimatic" :
types.other ? "other" :
false;
}
/*
Get the least broken ad link from the sorted at types
types: array of ad links
*/
function selectAdLink(types){
if(types==null)
return false;
return types.yumenetworks ? types.yumenetworks :
types.bnmla ? types.bnmla :
types.optimatic ? types.optimatic :
types.other ? types.other :
false;
}
$.ajax({
type: "GET",
dataType: "XML",
url: 'http://pubads.g.doubleclick.net/gampad/ads?sz=560x315&iu=/14312752/FlashPreRoll&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=http%3A%2F%2Fwww.SOME_SITE.com%2Fnews-article%2Fmediterranean-diet-high-olive-oil-linked-breast-cancer-risk-reduction&correlator=1453083948&description_url=http%253A%252F%252Fwww.SOME_SITE.com%252Fnews-article%252Fmediterranean-diet-high-olive-oil-linked-breast-cancer-risk-reduction&cust_params=PR_URL%3Db4cc6582-c9c1-4a70-9d42-be2e1a49889d%26PR_PageTyp%3Dnews_story%26Gender%3DFemale%26PR_Age%3DSeniors%26PR_Cndtns%3DObesity%2CBreast+Cancer+Female%2CCancer%2CCard' + decodeURIComponent(utcParams),
success: function(data) {
var types = sortAdTypes(data);
var type = selectAdType(types);
var link = selectAdLink(types);
dbug && console.log("Ad link: "+link);
dbug && console.log("Ad type: "+type);
// skip ads if there are no ads in the XML response
if(link==false)
buildVideoPlayer();
else
buildVideoPlayer(link, type);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
dbug && console.log(errorThrown);
}
});
})(jQuery);
</script>
This will, depending on how you set the globals, create a player with custom video urls and either show a pre, or a postroll ad (mobile too, if the ad provider supports it). We host our own kaltura server.
There is extra functionality for enabling playlists with ads, buttons for skipping videos and a timeout I made in case an ad fails so that the player doesn't stall for 30 seconds before playing a video (since Kaltura isn't able to catch this specific error).
The way it works: I make an ajax call to pubads.com, parse the AdVastTag from there and determine the ad provider to decide what parameters to set later. It works for all ad servers that serve VAST and VPAID ads, also mobile ads for providers that support it. What doesn't work is getting our videos to show with DoubleClick ads. The example on Kaltura does work, but they pass their videos into the player with a KMS ID (they uploaded their video to their admin system), but we want to pass the video as a URL, not an ID.
Seems like a lot of people are having issues with this and I heard people saying that you need to modify the back-end to allow Kaltura to play custom urls with doubleclick. Would be good to figure out a solution for everyone to see.
The way it should work is (ideally) by passing the custom video URLs into the mediaProxy and passing the doubleclick ad tag into flashvars.
This part sets the doubleClick ad url.
"doubleClick": {
"plugin": true,
"path": "http://cdnbakmi.kaltura.com/content/uiconf/ps/veria/kdp3.9.1/plugins/doubleclickPlugin.swf",
"adTagUrl": uri,
"leadWithFlash": true,
"disableCompanionAds": true,
},
Has anyone gotten this to work? Any help/suggestions is much appreciated.

Answer 1

Move the "'entryId' : 'url-to-my-video.mp4'," and the sourceType to the root object and it should work.

Answer 2

As it turns out, Kaltura does not support DoubleClick with custom video urls. But there is a way around it - use the generic VAST plugin for your ads, and it will work with mediaProxy for the majority of your ad providers.
Keep in mind, that the generic plugin does not support waterfall ads (that's where one provide calls another provider who calls another one who eventually gives us XML to an ad flash/html5/mp4 file). TO get around this problem, i suggest you come up with a list of providers that have nested ads, then on each ajax call to the pubads.com server, look at the XML and get the adTagUrl. If this element is present, recursively go to that url and repeat the process until it's no longer there. Keep a variable for the previous adTagUrl that you follow to before arriving at an ad file - this is the adTagUrl which will go into the generic VAST preRollUrl/postRollUrl parameter.
Besides that, some providers (like optimatic) will break the player because of an error that is not supported by Kaltura - the ad and the player will break in this case. When this happens, its best to reload the player.
Initiate a timeout once the ad starts buffering (adStart) and cancel it on onAdPlay (which is fired when the ad actually starts playing). If it doesn't reach this point in 12 seconds, reload the player without ads through the kWidget.embed() call.