Skip to content

Commit

Permalink
chore: upgrade flowplayer to v3 (#3891)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nnarhinen
nnarhinen authored Jul 14, 2022
1 parent 051e9c3 commit aa900aa
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 126 deletions.
143 changes: 73 additions & 70 deletions _includes/video/pb-is-fp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@

<!--pbjs and player code -->

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

<style>
Expand All @@ -28,78 +28,81 @@

<script type="text/javascript">

var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.
// We return the ad tag if it is available before the player is ready to play
// Otherwise the player waits for 2 secs for tag to be available.
var adtag = null
var timeout = 2000
var asyncTag = function() {
if (adtag) return Promise.resolve(adtag)

return new Promise(function (resolve) {
setTimeout(function() {
resolve(adtag)
}, timeout)
})
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

const BIDDER1_PROVIDER = 'appnexus';
const BIDDER1_PLACEMENT_ID = '13232361';

// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. &nbsp;
// We return the ad tag if it is available before the player is ready to play &nbsp;
// Otherwise the player waits for 2 secs for tag to be available.<br>
var adtag = null
var timeout = 2000
window.prebid_fetcher = function() {
if (adtag) return Promise.resolve(adtag)

return new Promise(function (resolve) {
setTimeout(function() {
resolve(adtag)
}, timeout)
})
}

/*
Prebid Video adUnit
*/

var videoAdUnit = {
code: 'video1',
sizes: [640,480],
mediaTypes: {
video: {
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
bids: [
{
bidder: BIDDER1_PROVIDER,
params: {
placementId: BIDDER1_PLACEMENT_ID
}
}
]
};

/*
Prebid Video adUnit
*/

var videoAdUnit = {
code: 'video1',
sizes: [640,480],
mediaTypes: {
video: {
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
bids: [
{
bidder: 'appnexus',
params: {
placementId: '13232361' // Add your own placement id here
}
}
]
};

pbjs.que.push(function(){
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
pbjs.que.push(function(){
pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request<br>

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',
cust_params: {
section: "blog",
anotherKey: "anotherValue"
},
output: "vast"
}
});
adtag = videoUrl;
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',
cust_params: {
section: "blog",
anotherKey: "anotherValue"
},
output: "vast"
}
});
});
adtag = videoUrl;
}
});
});

</script>

Expand Down
72 changes: 16 additions & 56 deletions examples/video/instream/flowplayer/pb-ve-flowplayer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,13 @@ <h1>{{ page.title }}</h1>

<!--video warning-->
<div class="pb-alert pb-alert-important" >
<p style="color:#85720f"><b>Important:</b>
<p style="color:#85720f"><b>Important:</b>
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>
</div>

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

<div id="player"></div>
<div id="controls">
<button id="ad-toggle" disabled>
Toggle ad playback
</button>
<p>The button will be enabled only during ads</p>
</div>

</div>

</div>

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

#controls {
float: left;
padding: 1em;
}
&lt;/style&gt;
&lt;script&gt;
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

const BIDDER1_PROVIDER = 'appnexus';
const BIDDER1_PLACEMENT_ID = '13232361';

// The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. &nbsp;
// We return the ad tag if it is available before the player is ready to play &nbsp;
// Otherwise the player waits for 2 secs for tag to be available.<br>
var adtag = null
var timeout = 2000
var asyncTag = function() {
window.prebid_fetcher = function() {
if (adtag) return Promise.resolve(adtag)

return new Promise(function (resolve) {
Expand Down Expand Up @@ -107,9 +96,9 @@ <h4>Place this code in the page header.</h4>
},
bids: [
{
bidder: 'appnexus',
bidder: BIDDER1_PROVIDER,
params: {
placementId: '13232361' // Add your own placement id here<br>
placementId: BIDDER1_PLACEMENT_ID
}
}
]
Expand Down Expand Up @@ -167,30 +156,15 @@ <h4>Place this code in the page body.</h4>
src: "//edge.flowplayer.org/drive.mp4",
title: "Flowplayer demo",
description: "Demo showing ads",
autoplay: true,
ima: {
ads: [
{"time":0,"adTag":asyncTag}
ads: [{
time: 0, // preroll
adTag: 'flowplayer://prebid_fetcher' // this will try to call window.prebid_fetcher
]
},
token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
})

var btn = document.querySelector('#ad-toggle');

btn.addEventListener('click', function() {
if (player.ads.adPlaying) player.ads.pause();
else player.ads.resume();
})

function toggleDisabled(disabled) {
return function() { btn.disabled = disabled }
}

player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));

&lt;/script&gt;
</pre>
</div>
Expand All @@ -203,29 +177,15 @@ <h4>Place this code in the page body.</h4>
src: "//edge.flowplayer.org/drive.mp4",
title: "Flowplayer demo",
description: "Demo showing ads",
autoplay: true,
ima: {
ads: [
{"time":0,"adTag":asyncTag}
]
ads: [{
time: 0, //preroll
adTag: 'flowplayer://prebid_fetcher'
}]
},
token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
})

var btn = document.querySelector('#ad-toggle');

btn.addEventListener('click', function() {
if (player.ads.adPlaying) player.ads.pause();
else player.ads.resume();
})

function toggleDisabled(disabled) {
return function() { btn.disabled = disabled }
}

player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));

</script>

Expand Down

0 comments on commit aa900aa

Please sign in to comment.