Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: upgrade flowplayer to v3 #3891

Merged
merged 1 commit into from
Jul 14, 2022
Merged

chore: upgrade flowplayer to v3 #3891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 73 additions & 70 deletions _includes/video/pb-is-fp.html
View file
Open in desktop
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
Open in desktop
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