Skip to content

Commit aa900aa

Browse files
nnarhinennnarhinen
authored
chore: upgrade flowplayer to v3 (#3891)
1 parent 051e9c3 commit aa900aa

File tree

2 files changed

+89
-126
lines changed

2 files changed

+89
-126
lines changed

‎_includes/video/pb-is-fp.html

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88

99
<!--pbjs and player code -->
1010

11-
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
12-
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
13-
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/ads.min.js"></script>
11+
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
12+
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
13+
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"></script>
1414
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
1515

1616
<style>
@@ -28,78 +28,81 @@
2828

2929
<script type="text/javascript">
3030

31-
var pbjs = pbjs || {};
32-
pbjs.que = pbjs.que || [];
33-
34-
// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.
35-
// We return the ad tag if it is available before the player is ready to play
36-
// Otherwise the player waits for 2 secs for tag to be available.
37-
var adtag = null
38-
var timeout = 2000
39-
var asyncTag = function() {
40-
if (adtag) return Promise.resolve(adtag)
41-
42-
return new Promise(function (resolve) {
43-
setTimeout(function() {
44-
resolve(adtag)
45-
}, timeout)
46-
})
31+
var pbjs = pbjs || {};
32+
pbjs.que = pbjs.que || [];
33+
34+
const BIDDER1_PROVIDER = 'appnexus';
35+
const BIDDER1_PLACEMENT_ID = '13232361';
36+
37+
// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. &nbsp;
38+
// We return the ad tag if it is available before the player is ready to play &nbsp;
39+
// Otherwise the player waits for 2 secs for tag to be available.<br>
40+
var adtag = null
41+
var timeout = 2000
42+
window.prebid_fetcher = function() {
43+
if (adtag) return Promise.resolve(adtag)
44+
45+
return new Promise(function (resolve) {
46+
setTimeout(function() {
47+
resolve(adtag)
48+
}, timeout)
49+
})
50+
}
51+
52+
/*
53+
Prebid Video adUnit
54+
*/
55+
56+
var videoAdUnit = {
57+
code: 'video1',
58+
sizes: [640,480],
59+
mediaTypes: {
60+
video: {
61+
context: 'instream',
62+
playerSize: [640, 480],
63+
mimes: ['video/mp4'],
64+
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
65+
playbackmethod: [2],
66+
skip: 1
4767
}
68+
},
69+
bids: [
70+
{
71+
bidder: BIDDER1_PROVIDER,
72+
params: {
73+
placementId: BIDDER1_PLACEMENT_ID
74+
}
75+
}
76+
]
77+
};
4878

49-
/*
50-
Prebid Video adUnit
51-
*/
52-
53-
var videoAdUnit = {
54-
code: 'video1',
55-
sizes: [640,480],
56-
mediaTypes: {
57-
video: {
58-
context: 'instream',
59-
playerSize: [640, 480],
60-
mimes: ['video/mp4'],
61-
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
62-
playbackmethod: [2],
63-
skip: 1
64-
}
65-
},
66-
bids: [
67-
{
68-
bidder: 'appnexus',
69-
params: {
70-
placementId: '13232361' // Add your own placement id here
71-
}
72-
}
73-
]
74-
};
75-
76-
pbjs.que.push(function(){
77-
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
79+
pbjs.que.push(function(){
80+
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request<br>
7881

79-
pbjs.setConfig({
80-
debug: true,
81-
cache: {
82-
url: 'https://prebid.adnxs.com/pbc/v1/cache'
83-
}
84-
});
85-
86-
pbjs.requestBids({
87-
bidsBackHandler: function(bids) {
88-
var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
89-
adUnit: videoAdUnit,
90-
params: {
91-
iu: '/19968336/prebid_cache_video_adunit',
92-
cust_params: {
93-
section: "blog",
94-
anotherKey: "anotherValue"
95-
},
96-
output: "vast"
97-
}
98-
});
99-
adtag = videoUrl;
82+
pbjs.setConfig({
83+
debug: true,
84+
cache: {
85+
url: 'https://prebid.adnxs.com/pbc/v1/cache'
86+
}
87+
});
88+
89+
pbjs.requestBids({
90+
bidsBackHandler: function(bids) {
91+
var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
92+
adUnit: videoAdUnit,
93+
params: {
94+
iu: '/19968336/prebid_cache_video_adunit',
95+
cust_params: {
96+
section: "blog",
97+
anotherKey: "anotherValue"
98+
},
99+
output: "vast"
100100
}
101101
});
102-
});
102+
adtag = videoUrl;
103+
}
104+
});
105+
});
103106

104107
</script>
105108

‎examples/video/instream/flowplayer/pb-ve-flowplayer.html

Lines changed: 16 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,13 @@ <h1>{{ page.title }}</h1>
1818

1919
<!--video warning-->
2020
<div class="pb-alert pb-alert-important" >
21-
<p style="color:#85720f"><b>Important:</b>
2221
<p style="color:#85720f"><b>Important:</b>
2322
This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.</p>
2423
</div>
2524

2625
<!--video placeholder | this should be formatted per the needs of each player-->
27-
<div>
2826

2927
<div id="player"></div>
30-
<div id="controls">
31-
<button id="ad-toggle" disabled>
32-
Toggle ad playback
33-
</button>
34-
<p>The button will be enabled only during ads</p>
35-
</div>
36-
37-
</div>
3828

3929
</div>
4030

@@ -53,9 +43,9 @@ <h4>Place this code in the page header.</h4>
5343
<pre class="pb-code-hl">
5444
<!--put javascript code here-->
5545
&lt;script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"&gt;&lt;/script&gt;
56-
&lt;link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css"&gt;
57-
&lt;script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"&gt;&lt;/script&gt;
58-
&lt;script src="//cdn.flowplayer.com/releases/native/stable/plugins/ads.min.js"&gt;&lt;/script&gt;
46+
&lt;link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css"&gt;
47+
&lt;script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"&gt;&lt;/script&gt;
48+
&lt;script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"&gt;&lt;/script&gt;
5949
&lt;script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"&gt;&lt;/script&gt;
6050
&lt;style&gt;
6151
#player {
@@ -64,21 +54,20 @@ <h4>Place this code in the page header.</h4>
6454
float: left;
6555
}
6656

67-
#controls {
68-
float: left;
69-
padding: 1em;
70-
}
7157
&lt;/style&gt;
7258
&lt;script&gt;
7359
var pbjs = pbjs || {};
7460
pbjs.que = pbjs.que || [];
7561

62+
const BIDDER1_PROVIDER = 'appnexus';
63+
const BIDDER1_PLACEMENT_ID = '13232361';
64+
7665
// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. &nbsp;
7766
// We return the ad tag if it is available before the player is ready to play &nbsp;
7867
// Otherwise the player waits for 2 secs for tag to be available.<br>
7968
var adtag = null
8069
var timeout = 2000
81-
var asyncTag = function() {
70+
window.prebid_fetcher = function() {
8271
if (adtag) return Promise.resolve(adtag)
8372

8473
return new Promise(function (resolve) {
@@ -107,9 +96,9 @@ <h4>Place this code in the page header.</h4>
10796
},
10897
bids: [
10998
{
110-
bidder: 'appnexus',
99+
bidder: BIDDER1_PROVIDER,
111100
params: {
112-
placementId: '13232361' // Add your own placement id here<br>
101+
placementId: BIDDER1_PLACEMENT_ID
113102
}
114103
}
115104
]
@@ -167,30 +156,15 @@ <h4>Place this code in the page body.</h4>
167156
src: "//edge.flowplayer.org/drive.mp4",
168157
title: "Flowplayer demo",
169158
description: "Demo showing ads",
170-
autoplay: true,
171159
ima: {
172-
ads: [
173-
{"time":0,"adTag":asyncTag}
160+
ads: [{
161+
time: 0, // preroll
162+
adTag: 'flowplayer://prebid_fetcher' // this will try to call window.prebid_fetcher
174163
]
175164
},
176165
token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
177166
})
178167

179-
var btn = document.querySelector('#ad-toggle');
180-
181-
btn.addEventListener('click', function() {
182-
if (player.ads.adPlaying) player.ads.pause();
183-
else player.ads.resume();
184-
})
185-
186-
function toggleDisabled(disabled) {
187-
return function() { btn.disabled = disabled }
188-
}
189-
190-
player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
191-
player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
192-
player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));
193-
194168
&lt;/script&gt;
195169
</pre>
196170
</div>
@@ -203,29 +177,15 @@ <h4>Place this code in the page body.</h4>
203177
src: "//edge.flowplayer.org/drive.mp4",
204178
title: "Flowplayer demo",
205179
description: "Demo showing ads",
206-
autoplay: true,
207180
ima: {
208-
ads: [
209-
{"time":0,"adTag":asyncTag}
210-
]
181+
ads: [{
182+
time: 0, //preroll
183+
adTag: 'flowplayer://prebid_fetcher'
184+
}]
211185
},
212186
token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
213187
})
214188

215-
var btn = document.querySelector('#ad-toggle');
216-
217-
btn.addEventListener('click', function() {
218-
if (player.ads.adPlaying) player.ads.pause();
219-
else player.ads.resume();
220-
})
221-
222-
function toggleDisabled(disabled) {
223-
return function() { btn.disabled = disabled }
224-
}
225-
226-
player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
227-
player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
228-
player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));
229189

230190
</script>
231191

0 commit comments

Comments
 (0)