Skip to content

Commit 42c8068

Browse files
Marko Okkonenbretg
Marko Okkonen
authored and
bretg
committed
Flowplayer video example (prebid#1324)
* flowplayer video example * flowplayer video example * token updated * tweaks
1 parent 4c89dd5 commit 42c8068

2 files changed

Lines changed: 148 additions & 0 deletions

File tree

‎examples/video/flowplayer-demo.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link rel="icon" type="image/png" href="/favicon.png">
6+
<script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
7+
<meta charset="utf-8" />
8+
<title>Prebid.js Cloud-Hosted Flowplayer Example</title>
9+
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
10+
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
11+
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/ads.min.js"></script>
12+
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
13+
<style>
14+
#player {
15+
max-width: 40em;
16+
width: 100%;
17+
float: left;
18+
}
19+
20+
#controls {
21+
float: left;
22+
padding: 1em;
23+
}
24+
</style>
25+
<script>
26+
var pbjs = pbjs || {};
27+
pbjs.que = pbjs.que || [];
28+
29+
// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.
30+
// We return the ad tag if it is available before the player is ready to play
31+
// Otherwise the player waits for 2 secs for tag to be available.
32+
var adtag = null
33+
var timeout = 2000
34+
var asyncTag = function() {
35+
if (adtag) return Promise.resolve(adtag)
36+
37+
return new Promise(function (resolve) {
38+
setTimeout(function() {
39+
resolve(adtag)
40+
}, timeout)
41+
})
42+
}
43+
44+
/*
45+
Prebid Video adUnit
46+
*/
47+
48+
var videoAdUnit = {
49+
code: 'video1',
50+
sizes: [640,480],
51+
mediaTypes: {
52+
video: {
53+
context: "instream"
54+
}
55+
},
56+
bids: [
57+
{
58+
bidder: 'appnexus',
59+
params: {
60+
placementId: '13232361', // Add your own placement id here
61+
video: {
62+
skipppable: true,
63+
playback_method: ['auto_play_sound_off']
64+
}
65+
}
66+
}
67+
]
68+
};
69+
70+
pbjs.que.push(function(){
71+
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
72+
73+
pbjs.setConfig({
74+
debug: true,
75+
cache: {
76+
url: 'https://prebid.adnxs.com/pbc/v1/cache'
77+
}
78+
});
79+
80+
pbjs.requestBids({
81+
bidsBackHandler: function(bids) {
82+
var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
83+
adUnit: videoAdUnit,
84+
params: {
85+
iu: '/19968336/prebid_cache_video_adunit',
86+
cust_params: {
87+
section: "blog",
88+
anotherKey: "anotherValue"
89+
},
90+
output: "vast"
91+
}
92+
});
93+
adtag = videoUrl;
94+
}
95+
});
96+
});
97+
98+
</script>
99+
</head>
100+
101+
<body>
102+
103+
<h1>Prebid.js Cloud-Hosted Flowplayer Example</h1>
104+
<br>
105+
<br>
106+
107+
<div id="player"></div>
108+
<div id="controls">
109+
<button id="ad-toggle" disabled>
110+
Toggle ad playback
111+
</button>
112+
<p>The button will be enabled only during ads</p>
113+
</div>
114+
115+
<script type="text/javascript">
116+
var player = flowplayer('#player', {
117+
src: "//edge.flowplayer.org/drive.mp4",
118+
title: "Flowplayer demo",
119+
description: "Demo showing ads",
120+
autoplay: true,
121+
ima: {
122+
ads: [
123+
{"time":0,"adTag":asyncTag}
124+
]
125+
},
126+
token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
127+
})
128+
129+
var btn = document.querySelector('#ad-toggle');
130+
131+
btn.addEventListener('click', function() {
132+
if (player.ads.adPlaying) player.ads.pause();
133+
else player.ads.resume();
134+
})
135+
136+
function toggleDisabled(disabled) {
137+
return function() { btn.disabled = disabled }
138+
}
139+
140+
player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
141+
player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
142+
player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));
143+
144+
</script>
145+
146+
</body>
147+
</html>

‎examples/video/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ sidebarType: 4
2525
- [Kaltura](klt-demo.html)
2626
- [Ooyala](ooyala-demo.html)
2727
- [Brid Player](brid-player-demo.html)
28+
- [Flowplayer](flowplayer-demo.html)
2829

2930
### Prebid.js (using Prebid Server)
3031

0 commit comments

Comments
 (0)