mk9-prebid
Version:
Header Bidding Management Library
128 lines (108 loc) • 3.37 kB
HTML
<!--
This page exists to test a video ad, end-to-end.
-->
<html>
<head>
<meta charset="utf-8" />
<title>Prebid.js video adUnit example</title>
<!-- videojs -->
<link rel="stylesheet" href="http://vjs.zencdn.net/5.9.2/video-js.css">
<script type="text/javascript" src="http://vjs.zencdn.net/5.9.2/video.js"></script>
<!-- videojs-vast-vpaid -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
<!-- prebid.js -->
<script src="../../build/dist/prebid.js" async=true></script>
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
/*
Prebid Video adUnit
*/
var videoAdUnit = {
code: 'video1',
sizes: [640,480],
mediaTypes: {
video: {context: 'instream', playerSize: [640, 480]}
},
bids: [
{
bidder: 'appnexus',
params: {
placementId: '13232361',
video: {
skipppable: false,
playback_methods: ['auto_play_sound_off']
}
}
}
]
};
pbjs.que.push(function(){
pbjs.onEvent('auctionEnd', function() {
let pEl = document.createElement('p');
pEl.innerText = 'PREBID HAS FINISHED';
pEl.id = 'statusText';
let parDiv = document.getElementById('event-window');
parDiv.appendChild(pEl);
});
pbjs.addAdUnits(videoAdUnit);
pbjs.setConfig({
debug: true,
cache: {
url: 'https://prebid.adnxs.com/pbc/v1/cache'
}
});
pbjs.requestBids({
bidsBackHandler : function(bids) {
var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
adUnit: videoAdUnit,
params: {
iu: '/19968336/prebid_cache_video_adunit'
}
});
invokeVideoPlayer(videoUrl);
}
});
});
pbjs.bidderSettings = {
appnexus: {
bidCpmAdjustment: function() {
return 10.00;
}
}
};
</script>
</head>
<body>
<h2>Prebid Video -- video.js</h2>
<div id="event-window"></div>
<div class="example-video-container">
<video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls
data-setup='{}'
width='640'
height='480'
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
<source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
</video>
</div>
<script>
function invokeVideoPlayer(url) {
videojs("vid1").ready(function() {
this.vastClient({
adTagUrl: url,
playAdAlways: true,
verbosity: 4,
vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
autoplay: true
});
this.muted(true);
this.play();
});
}
</script>
</body>
</html>