mk9-prebid
Version:
Header Bidding Management Library
110 lines (95 loc) • 2.82 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Prebid.js video adUnit example</title>
<link href="http://vjs.zencdn.net/4.7.1/video-js.css" rel="stylesheet">
<link href="https://raw.githubusercontent.com/theonion/videojs-vast-plugin/master/lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
<link href="https://raw.githubusercontent.com/theonion/videojs-vast-plugin/master/videojs.vast.css" rel="stylesheet" type="text/css">
<style type="text/css">
.description {
background-color:#eee;
border: 1px solid #777;
padding: 10px;
font-size: .8em;
line-height: 1.5em;
font-family: Verdana, sans-serif;
}
.example-video-container {
display: inline-block;
}
</style>
<script src="/build/dev/prebid.js" async=true></script>
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
/*
adUnits can support video demand requests by setting 'mediaType' to
'video'. When an adUnit is configured to support video, all bidders
within that adUnit must be video-enabled as well, as configured in
adapters.json.
*/
var videoAdUnit = {
code: 'video1',
sizes: [640,480],
mediaTypes: { video: {} },
bids: [
{
bidder: 'appnexusAst',
params: {
placementId: '123456',
video: {
id: 123,
skipppable: true,
playback_method: ['auto_play_sound_off']
}
}
}
]
};
pbjs.que.push(function(){
pbjs.addAdUnits(videoAdUnit);
pbjs.requestBids({
timeout : 3000,
bidsBackHandler : function(bids) {
var adserverTag = '<dfp_tag>'; // base ad server tag, see: https://support.google.com/dfp_premium/answer/1068325
var options = {
'adserver': 'dfp',
'code': 'video1' //code that matches the video adUnit declared above
};
//generate URL
var masterTagUrl = pbjs.buildMasterVideoTagFromAdserverTag(adserverTag, options);
//send masterTagUrl to the video player
invokeVideoPlayer(masterTagUrl);
}
});
});
</script>
</head>
<body>
<div class="example-video-container">
<video id="vid1" class="video-js vjs-default-skin" autoplay controls preload="auto"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'
width='640'
height='480'
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<p>Video Playback Not Supported</p>
</video>
</div>
<script>
var vid1 = videojs('vid1');
vid1.muted(true);
vid1.ads();
/*
This function called after prebid is back
*/
function invokeVideoPlayer(url) {
vid1.vast({
url: url
});
}
</script>
</body>
</html>