<!DOCTYPE html>
<html>
<head>
<!-- This page is an example of prebid and JWPlayer integration with
a JWPlayer playAd call once the player is ready for playback -->
<meta charset="utf-8" />
<title>Prebid.js Self-Hosted JW Player Example</title>
<!-- prebid.js -->
<script src="https://acdn.adnxs.com/prebid/not-for-prod/1/prebid.js" async=true></script>
<!-- JWPlayer -->
<script type="text/javascript" src="http://ssl.p.jwpcdn.com/player/v/7.2.4/jwplayer.js"></script>
<script type="text/javascript">
jwplayer.key="YEUwUA9wRFeDcydr"; //Test Key - replace this with your own valid JWPlayer license key
</script>
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
// define invokeVideoPlayer in advance in case we get the bids back from prebid before the entire page loads
var tempTag = false;
var invokeVideoPlayer = function(url){
tempTag = url;
}
/*
Prebid Video adUnit
*/
var videoAdUnit = {
code: 'video1',
mediaTypes: {
video: {
context: "instream",
playerSize: [640, 480]
}
},
bids: [
{
bidder: 'appnexusAst',
params: {
placementId: '9333431', // Add your own placement id here
video: {
skipppable: true,
playback_method: ['auto_play_sound_off']
}
}
}
]
};
var logBids = function(bids){
console.log('MESSAGE: got bids back: ');
console.log(bids);
if (!bids.video1) {
console.log('MESSAGE: no video demand');
}
else {
console.log('MESSAGE: we got video demand!');
}
// Log the VAST URL, if there is one
try {
url = bids.video1.bids[0].vastUrl;
console.log('MESSAGE: VAST URL: ');
console.log('MESSAGE: ' + url);
} catch (e) {
console.log("MESSAGE: There was an error logging the vast url: " + e);
} // ignore if there is no vastUrl
}
pbjs.que.push(function(){
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
pbjs.setConfig({
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',
cust_params: {
section: "blog",
anotherKey: "anotherValue"
},
output: "vast"
}
});
invokeVideoPlayer(videoUrl);
}
});
});
pbjs.bidderSettings =
{
standard: {
adserverTargeting: [
{
key: "hb_bidder",
val: function (bidResponse) {
return bidResponse.bidderCode;
}
}, {
key: "hb_adid",
val: function (bidResponse) {
return bidResponse.adId;
}
}, {
key: "hb_pb",
val: function (bidResponse) {
return "10.00";
}
}, {
key: "hb_size",
val: function (bidResponse) {
return bidResponse.size;
}
}
]
}
};
</script>
</head>
<body>
<h1>Prebid Video - JWPlayer</h1>
<br>
<br>
<div id="playerContainerJW" style='width:640px; height:480px; border:1px solid black;'>
</div>
<script>
var jwPlayerInstance = jwplayer("playerContainerJW");
invokeVideoPlayer = function(url) {
jwPlayerInstance.setup({
"file": "http://video-demo.appnexus.com/pbjs/JWPlayerDemo/AppNexus_Summit_Video_HighRes.mp4",
"width": 640,
"height": 480,
"autostart": true,
"mute": true,
"advertising": {
client: "vast",
}
});
jwPlayerInstance.on('beforePlay', function(){
jwPlayerInstance.playAd(url);
})
}
if (tempTag) {
invokeVideoPlayer(tempTag);
tempTag = false;
}
</script>
</body>
</html>