Skip to content

Commit cbb4d48

Browse files
author
sberry
committed
added video player examples. put example tab into separate layout file
1 parent ad95aa2 commit cbb4d48

9 files changed

Lines changed: 586 additions & 18 deletions

File tree

‎_includes/example_tab.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<h5>All Examples</h5>
2+
3+
<ul id="example-tab">
4+
5+
{% assign example_pages = (site.pages | where: "layout", "example") | sort: "pid" %}
6+
{% for epage in example_pages %}
7+
<li>
8+
<a href="{{ epage.url }}">{{ epage.title }}</a>
9+
{% if epage.is_beta %}
10+
<span class="label label-warning">Beta</span>
11+
{% endif %}
12+
</li>
13+
{% endfor %}
14+
<br>
15+
{% assign pl_example_pages = (site.pages | where: "layout", "player_example" | sort: "pid" %}
16+
{% for p_epage in pl_example_pages %}
17+
<li>
18+
<a href="{{ p_epage.url }}">{{ p_epage.title }}</a>
19+
{% if p_epage.is_beta %}
20+
<span class="label label-warning">Beta</span>
21+
{% endif %}
22+
</li>
23+
{% endfor %}
24+
</ul>

‎_layouts/example.html‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,9 @@
1313
</div>
1414

1515
<div class="col-md-6">
16-
<h5>All Examples</h5>
17-
18-
<ul id="example-tab">
19-
20-
{% assign example_pages = (site.pages | where: "layout", "example") | sort: "pid" %}
21-
22-
{% for epage in example_pages %}
23-
<li>
24-
<a href="{{ epage.url }}">{{ epage.title }}</a>
25-
{% if epage.is_beta %}
26-
<span class="label label-warning">Beta</span>
27-
{% endif %}
28-
</li>
29-
{% endfor %}
30-
31-
</ul>
16+
{% include example_tab.html %}
3217
<!-- </div> -->
33-
</div>
18+
</div>
3419
</div>
3520
</div>
3621
</div>

‎_layouts/player_example.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
{% include head.html %}
2+
3+
{% include main_nav.html %}
4+
5+
<div class="container bs-docs-container">
6+
<div class="row">
7+
8+
<div class="col-md-5">
9+
<div class="docs-sidebar">
10+
<div class="row">
11+
<div class="col-md-6">
12+
{% include left_nav.html %}
13+
</div>
14+
15+
<div class="col-md-6">
16+
{% include example_tab.html %}
17+
<!-- </div> -->
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<div class="col-md-7" role="main">
24+
<div class="bs-docs-section" markdown="1">
25+
26+
<h1>{{ page.description }} </h1>
27+
28+
{% if page.why_link %}
29+
<h4>Who should use this example:</h4>
30+
31+
<ul>
32+
<li>Please refer to the <a href="{{page.why_link}}" target="_blank">product feature launch notes</a>.</li>
33+
</ul>
34+
{% endif %}
35+
<p>This page is an example of using prebid video with a specific player. For a general guide to using video in prebid, click <a href="prebid.org/dev-docs/show-video-with-a-dfp-video-tag.html">here.</a></p>
36+
<br>
37+
38+
<h4>This page contains:</h4>
39+
40+
<p>
41+
<ul>
42+
{% for about_bullet in page.about %}
43+
<li>{{ about_bullet}}</li>
44+
{% endfor %}
45+
</ul>
46+
</p>
47+
<br>
48+
<h4>Player specific notes:</h4>
49+
<p>
50+
<ul>
51+
{% for player_bullet in page.player_notes %}
52+
<li>{{ player_bullet}}</li>
53+
{% endfor %}
54+
</ul>
55+
</p>
56+
<br>
57+
<p>
58+
59+
Click <a href="//{{page.demo_link}}">here</a> to view a demo page with this example. Click <strong>Edit in JSFiddle</strong> to open the example in a new tab.
60+
61+
</p>
62+
63+
<p>
64+
For tips and troublshooting info, see:
65+
<ul>
66+
<li>
67+
<a href="{{site.github.url}}/dev-docs/toubleshooting-tips.html">Tips for Troubleshooting</a>
68+
</li>
69+
<li>
70+
<a href="{{site.github.url}}/dev-docs/common-issues.html">Common Issues</a>
71+
</li>
72+
</ul>
73+
</p>
74+
75+
</div>
76+
</div>
77+
78+
</div>
79+
80+
<br>
81+
82+
<div class="row">
83+
84+
<div class="col-sm-6">
85+
86+
87+
<table class="jsfiddle-line-number">
88+
<tr>
89+
<td class="line-number">
90+
91+
{% for num in (1..page.code_lines) %}
92+
93+
{{ num }} <br>
94+
95+
{% endfor %}
96+
97+
</td>
98+
99+
<td>
100+
101+
<iframe width="100%" height="{{page.code_height}}" src="//{{page.jsfiddle_link}}" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
102+
103+
</td>
104+
</tr>
105+
</table>
106+
107+
108+
</div>
109+
110+
<div class="col-sm-6">
111+
112+
113+
{% include dev-docs/build-from-source-warning.md %}
114+
115+
{{content}}
116+
117+
</div>
118+
<br><br>
119+
120+
</div>
121+
122+
</div>
123+
124+
125+
{% include foot.html %}

‎assets/css/style.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,12 @@ table.jsfiddle-line-number .line-number {
327327
margin-bottom: 6px;
328328
}
329329

330-
table {
330+
table:not(.jsfiddle-line-number) {
331331
table-layout: fixed;
332332
word-wrap: break-word;
333333
}
334+
335+
div.pl-doc-entry{
336+
position: absolute;
337+
}
338+

‎dev-docs/examples/brightcove-example.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
layout: player_example
3+
title: Brightcove Player Integration
4+
description: Show a prebid ad in a Brightcove player
5+
6+
top_nav_section: dev_docs
7+
nav_section: quick-start
8+
9+
hide: true
10+
beta: true
11+
12+
about:
13+
- Using invokeVideoPlayer to set up and access the Brightcove player instance.
14+
- Using bc() to make sure all the necessary scripts are loaded before playing an ad.
15+
- Playing an ad using Brightcove's ima3 plugin.
16+
- Configuring the player's ima3 settings on page.
17+
18+
player_notes:
19+
- For this demo we'll be configuring the player's ima3 settings on the page instead of in video cloud. Make sure you load the ima3 script and css file in addition to your player script.
20+
- On the publish page for the video or player, choose the <b>Advanced</b> embed code (not Standard).
21+
22+
jsfiddle_link: jsfiddle.net/shirleylberry/dd4wd8z7/embedded/html/
23+
demo_link: video-demo.appnexus.com/pbjs/brightcove-prebid/bc-demo.html
24+
25+
code_lines: 154
26+
code_height: 3325
27+
28+
pid: 32
29+
---
30+
<div markdown="1" style="top:110px" class="pl-doc-entry">
31+
#### Line 4: Load the ima3 css file
32+
Load the ima3 css file to ensure the ad displays correctly in the player.
33+
</div>
34+
35+
<div markdown="1" style="top:300px" class="pl-doc-entry">
36+
#### Line 15 to 18: Pre-define `invokeVideoPlayer`
37+
Because we have no way of knowing when all the bids will be returned from prebid we can't be sure that the browser will reach the point where `invokeVideoPlayer` is defined before bidsBackHandler fires and tries to call it. To prevent a `invokeVideoPlayer not defined` error, we pre-define it before we make the call to prebid, and redefine it later on with the code to create the player and play the ad. In this first version it simply stores the winning vast to use later.
38+
</div>
39+
40+
<div markdown="1" style="top:550px" class="pl-doc-entry">
41+
#### Line 20 to 36: Create a video ad unit
42+
Create a video ad unit to request bids for. The `code` is the name we'll use to refer to this ad unit throughout the prebid code. Make sure you include the `mediaType: 'video'` and replace the `placementId` with your own valid placement ID.
43+
</div>
44+
45+
<div markdown="1" style="top:1000px" class="pl-doc-entry">
46+
#### Line 38 to 54: Log the bids for debugging
47+
Log information about the bids to the console, including whether any bids were returned. This isn't strictly necessary, but is useful for debugging.
48+
</div>
49+
50+
<div markdown="1" style="top:1225px" class="pl-doc-entry">
51+
#### Line 57 to 75: Add the ad units and request bids
52+
Add the ad units you want to request bids for to prebid, and then call `requestBids()`, passing in a json object. In the json object, define the `bidsBackHandler` callback which will run once all the bids are returned.
53+
</div>
54+
55+
<div markdown="1" style="top:1400px" class="pl-doc-entry">
56+
#### Line 62 to 69: Build masterVideoTag and call invokeVideoPlayer
57+
Once we have the bids back, `bidsBackHandler` will be called. Inside this callback, we create the masterVideoTag and pass it to the video player by calling `invokeVideoPlayer()`.
58+
</div>
59+
60+
<div markdown="1" style="top:2475px" class="pl-doc-entry">
61+
#### Line 113 to 122: Create video element
62+
Create your video element. You can copy paste this from the embed code in Video Cloud. Add an id tag to the player element - this is what we'll use to reference the player later.
63+
</div>
64+
65+
<div markdown="1" style="top:2600px" class="pl-doc-entry">
66+
#### Line 125 and 126: Include player and ima3 plugin scripts
67+
First, include the player script from Brightcove. This will also be part of the embed code provided by Video Cloud. Then include the ima3 plugin script. Since we are not configuring the plugin in Video Cloud, we need to include this script on the page.
68+
</div>
69+
70+
<div markdown="1" style="top:2700px" class="pl-doc-entry">
71+
#### Line 129 to 146: Redefine invokeVideoPlayer
72+
Redefine `invokeVideoPlayer` to replace the temporary one we defined above. Now, `invokeVideoPlayer` will take in the winning url, create the player, and play the ad.
73+
</div>
74+
75+
<div markdown="1" style="top:2775px" class="pl-doc-entry">
76+
#### Line 130: Use bc to reference the video player
77+
The first time we reference the player, we use the `bc()` method to ensure that all the player scripts have loaded before we add the video element to the dom or interact with it.
78+
</div>
79+
80+
<div markdown="1" style="top:2850px" class="pl-doc-entry">
81+
#### Line 130 to 137: Pass options into the ima3 plugin
82+
Next pass in a json object of options to the player's ima3 plugin. The `url` we passed into `invokeVideoPlayer` will be the `serverUrl` we pass into the plugin.
83+
</div>
84+
85+
<div markdown="1" style="top:2975px" class="pl-doc-entry">
86+
#### Line 139 to 145: Add a `ready` listener and interact with the player
87+
Call `videojs()` and pass in the id of the video element to get a reference to the player. Call `.ready` on the player to set up the event listener, and place any code that will interact with the player inside the callback (such as logging events for the player or ads).
88+
</div>
89+
90+
<div markdown="1" style="top:3125px" class="pl-doc-entry">
91+
#### Line 148 to 151: Account for page speed
92+
If prebid returned bids before the browser reached the end of the page, the first version of `invokeVideoPlayer` will have been called from `bidsBackHandler` so the winning vast tag will be stored in tempTag. If that's the case, we want to call the 'real' version of `invokeVideoPlayer` with the stored url to create the player and play the ad. If `tempTag` is not defined, that means the browser reached the end of the page before the bids came back from prebid, meaning the 'real' version of `invokeVideoPlayer` was already called.
93+
</div>

‎dev-docs/examples/jw-cloud-example.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
layout: player_example
3+
title: JW Cloud Player Integration
4+
description: Show a prebid ad in a cloud hosted JW Player
5+
6+
top_nav_section: dev_docs
7+
nav_section: quick-start
8+
9+
hide: true
10+
beta: true
11+
12+
about:
13+
- Setting up JW Player to dynamically play ads.
14+
- Using a cloud-hosted JW player.
15+
- Using invokeVideoPlayer to set up and access the JW Player instance.
16+
- Dynamically inserting a preroll ad into JW Player.
17+
18+
player_notes:
19+
- You must have the correct JW Player license that allows you to play advertising.
20+
- The different methods of embedding JW Player on your site can be found <a href="https://support.jwplayer.com/customer/portal/articles/1406723-mp4-video-embed">here</a>.
21+
- For this example we will be using method 1, a cloud-hosted player and JW Platform hosted content. To see an example using the self-hosted player, click <a href="#">here</a>.
22+
- No matter what embedding method you choose to use, you must follow the <b>custom embed</b> instructions. You cannot use the single-line embed.
23+
- If you're using a cloud-hosted player, <b>do not enable advertising in the platform</b>. We'll do it on page so that we can use the vast url from prebid.
24+
- You can set up most of your player's settings in the platform. The platform settings will be used unless overridden on the page in the setup call.
25+
26+
jsfiddle_link: jsfiddle.net/shirleylberry/zt70zj9z/embedded/html/
27+
demo_link: video-demo.appnexus.com/pbjs/JWPlayerDemo/jwPlatformPrebidDemo.html
28+
29+
code_lines: 137
30+
code_height: 2950
31+
32+
pid: 30
33+
---
34+
<div markdown="1" style="top:200px" class="pl-doc-entry">
35+
#### Line 15 to 18: Pre-define `invokeVideoPlayer`
36+
Because we have no way of knowing when all the bids will be returned from prebid we can't be sure that the browser will reach the point where `invokeVideoPlayer` is defined before bidsBackHandler fires and tries to call it. To prevent a `invokeVideoPlayer not defined` error, we pre-define it before we make the call to prebid, and redefine it later on with the code to create the player and play the ad. In this first version it simply stores the winning vast to use later.
37+
</div>
38+
39+
<div markdown="1" style="top:550px" class="pl-doc-entry">
40+
#### Line 20 to 34: Create a video ad unit
41+
Create a video ad unit to request bids for. The `code` is the name we'll use to refer to this ad unit throughout the prebid code. Make sure you include the `mediaType: 'video'` and replace the `placementId` with your own valid placement ID.
42+
</div>
43+
44+
<div markdown="1" style="top:950px" class="pl-doc-entry">
45+
#### Line 36 to 52: Log the bids for debugging
46+
Log information about the bids to the console, including whether any bids were returned. This isn't strictly necessary, but is useful for debugging.
47+
</div>
48+
49+
<div markdown="1" style="top:1275px" class="pl-doc-entry">
50+
#### Line 54 to 73: Add the ad units and request bids
51+
Add the ad units you want to request bids for to prebid, and then call `requestBids()`, passing in a json object. In the json object, define the `bidsBackHandler` callback which will run once all the bids are returned.
52+
</div>
53+
54+
<div markdown="1" style="top:1400px" class="pl-doc-entry">
55+
#### Line 60 to 71: Build masterVideoTag and call invokeVideoPlayer
56+
Once we have the bids back, `bidsBackHandler` will be called. Inside this callback, we create the masterVideoTag and pass it to the video player by calling `invokeVideoPlayer()`.
57+
</div>
58+
59+
<div markdown="1" style="top:2300px" class="pl-doc-entry">
60+
#### Line 112: Include the player library
61+
The script tag for your cloud-hosted video player can be found in your JW Platform account on the player's page, under 'Cloud Player Library URL'. The player will use the settings you define in JW Platform unless you override them on the page in the setup call.
62+
</div>
63+
64+
<div markdown="1" style="top:2415px" class="pl-doc-entry">
65+
#### Line 114: Get a reference to the player instance
66+
Get a reference to the player by calling `jwplayer()` and passing in the id of the div you want to load the player into.
67+
</div>
68+
69+
<div markdown="1" style="top:2500px" class="pl-doc-entry">
70+
#### Line 117 to 122: Call setup on the player instance
71+
Call `setup()` on the player instance with the settings you want. We need to pass in a media file and an advertising block with a `client` defined.
72+
</div>
73+
74+
<div markdown="1" style="top:2575px" class="pl-doc-entry">
75+
#### Line 119 to 121: Pass in Advertising
76+
We must pass in an `"advertising"` block in our settings in order to enable advertising for this player. We can also specify the tag or an ad schedule here but for this demo we'll insert the tag dynamically before the content plays.
77+
</div>
78+
79+
<div markdown="1" style="top:2675px" class="pl-doc-entry">
80+
#### Line 124 to 126: Play a prebid ad as a preroll
81+
Before the player begins to play the content video, play an ad.
82+
</div>
83+
84+
<div markdown="1" style="top:2750px" class="pl-doc-entry">
85+
#### Line 129 to 132: Account for page speed
86+
If prebid returned bids before the browser reached the end of the page, the first version of `invokeVideoPlayer` will have been called from `bidsBackHandler` so the winning vast tag will be stored in tempTag. If that's the case, we want to call the 'real' version of `invokeVideoPlayer` with the stored url to create the player and play the ad. If `tempTag` is not defined, that means the browser reached the end of the page before the bids came back from prebid, meaning the 'real' version of `invokeVideoPlayer` was already called.
87+
</div>
88+
89+

0 commit comments

Comments
 (0)