Skip to content

Commit 4042078

Browse files
dweinberdweinber
committed
Fix formatting
1 parent 0b61f6a commit 4042078

File tree

1 file changed

+179
-159
lines changed

1 file changed

+179
-159
lines changed

Diff for: ‎playerUi/adsMarkersWithUiApi.html

+179-159
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,205 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Bitmovin Demo</title>
5-
<meta charset="UTF-8"/>
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
9-
<link rel="icon" type="../image/png" href="../images/bit-fav.png">
3+
<head>
4+
<title>Bitmovin Ads Marker Demo</title>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
9+
<link rel="icon" type="../image/png" href="../images/bit-fav.png" />
10+
1011
<!-- Bitmovin Player -->
1112
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer.js"></script>
1213
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer-ui.js"></script>
1314
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/modules/bitmovinplayer-advertising-bitmovin.js"></script>
14-
<link href="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer-ui.css" rel="stylesheet"/>
15-
<style>
16-
body {
17-
margin: 0;
18-
padding: 0;
19-
font-family: 'Open Sans', sans-serif;
20-
color: #fff;
21-
font-weight: 300;
22-
}
23-
24-
body {
25-
background: rgba(44, 131, 185, 1);
26-
background: -moz-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
27-
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(44, 131, 185, 1)), color-stop(100%, rgba(30, 171, 227, 1)));
28-
background: -webkit-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
29-
background: -o-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
30-
background: -ms-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
31-
background: linear-gradient(to right, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
32-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c83b9', endColorstr='#1eabe3', GradientType=1);
33-
}
34-
35-
#wrapper {
36-
background: url(../images/logo-bg-demopage.png);
37-
height: 100vh;
38-
}
39-
40-
#banner {
41-
border-bottom: 1px solid #fff;
42-
background-color: #1eabe3;
43-
width: 100%
44-
}
45-
46-
#banner h1 {
47-
margin: 0;
48-
padding: 30px;
49-
}
15+
<link href="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer-ui.css" rel="stylesheet" />
5016

17+
<style>
18+
body {
19+
margin: 0;
20+
padding: 0;
21+
font-family: 'Open Sans', sans-serif;
22+
color: #fff;
23+
font-weight: 300;
24+
}
25+
26+
body {
27+
background: rgba(44, 131, 185, 1);
28+
background: -moz-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
29+
background: -webkit-gradient(
30+
left top,
31+
right top,
32+
color-stop(0%, rgba(44, 131, 185, 1)),
33+
color-stop(100%, rgba(30, 171, 227, 1))
34+
);
35+
background: -webkit-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
36+
background: -o-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
37+
background: -ms-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
38+
background: linear-gradient(to right, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
39+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c83b9', endColorstr='#1eabe3', GradientType=1);
40+
}
41+
42+
#wrapper {
43+
background: url(../images/logo-bg-demopage.png);
44+
height: 100vh;
45+
}
46+
47+
#banner {
48+
border-bottom: 1px solid #fff;
49+
background-color: #1eabe3;
50+
width: 100%;
51+
}
52+
53+
#banner h1 {
54+
margin: 0;
55+
padding: 30px;
56+
}
57+
58+
.logo {
59+
padding: 10px;
60+
width: 25%;
61+
min-width: 350px;
62+
float: left;
63+
margin: auto;
64+
}
65+
66+
.title {
67+
width: 75%;
68+
white-space: nowrap;
69+
}
70+
71+
.clear {
72+
clear: both;
73+
}
74+
75+
.content {
76+
margin-bottom: 10em;
77+
}
78+
79+
h1,
80+
h2,
81+
h3,
82+
p {
83+
font-weight: 300;
84+
text-align: center;
85+
margin: 40px;
86+
}
87+
88+
#player {
89+
max-width: 900px;
90+
width: 90%;
91+
margin: auto;
92+
-webkit-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
93+
-moz-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
94+
box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
95+
}
96+
97+
a {
98+
color: #97d9ef;
99+
font-weight: 400;
100+
text-decoration: none;
101+
}
102+
103+
a:hover {
104+
color: #fff;
105+
}
106+
107+
@media (max-width: 800px) {
51108
.logo {
52-
padding: 10px;
53-
width: 25%;
54-
min-width: 350px;
55-
float: left;
56-
margin: auto;
109+
width: 100%;
57110
}
58111

59112
.title {
60-
width: 75%;
61-
white-space: nowrap;
62-
}
63-
64-
.clear {
65-
clear: both;
66-
}
67-
68-
.content {
69-
margin-bottom: 10em;
70-
}
71-
72-
h1, h2, h3, p {
73-
font-weight: 300;
74-
text-align: center;
75-
margin: 40px;
76-
}
77-
78-
#player {
79-
max-width: 900px;
80-
width: 90%;
81-
margin: auto;
82-
-webkit-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
83-
-moz-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
84-
box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
85-
}
86-
87-
a {
88-
color: #97d9ef;
89-
font-weight: 400;
90-
text-decoration: none;
91-
}
92-
93-
a:hover {
94-
color: #fff;
95-
}
96-
97-
@media (max-width: 800px) {
98-
.logo {
99-
width: 100%;
100-
}
101-
102-
.title {
103-
display: none;
104-
}
113+
display: none;
105114
}
115+
}
106116
</style>
107117
<style>
108-
.bmpui-ui-seekbar .bmpui-seekbar .bmpui-seekbar-markers > .bmpui-seekbar-marker-ads {
109-
border-color: rgba(255, 255, 0, 1);
110-
background-color: rgba(255, 255, 0, 1);
111-
}
118+
.bmpui-ui-seekbar .bmpui-seekbar .bmpui-seekbar-markers > .bmpui-seekbar-marker-ads {
119+
border-color: rgba(255, 255, 0, 1);
120+
background-color: rgba(255, 255, 0, 1);
121+
}
112122
</style>
113-
</head>
114-
<body>
115-
<div id="wrapper">
116-
<div id="banner">
117-
<div class="logo"><img src="../images/bitmovin-logo.png"></div>
123+
</head>
124+
<body>
125+
<div id="wrapper">
126+
<div id="banner">
127+
<div class="logo"><img src="../images/bitmovin-logo.png" /></div>
118128
<div class="title"><h1>Ad Break Markers</h1></div>
119129
<div class="clear"></div>
120-
</div>
121-
<div class="container">
130+
</div>
131+
<div class="container">
122132
<h1>HTML5 Adaptive Streaming Player for MPEG-DASH & HLS</h1>
123133
<div class="content">
124-
<div class="player-wrapper">
125-
<div id="player"></div>
126-
</div>
127-
<div class="description">
128-
<p>For more information about the Bitmovin Player, please have a look at our online <a
129-
href="https://developer.bitmovin.com/playback/docs/" target="_blank">Documentation</a>.</p>
130-
</div>
134+
<div class="player-wrapper">
135+
<div id="player"></div>
136+
</div>
137+
<div class="description">
138+
<p>
139+
For more information about the Bitmovin Player, please have a look at our online
140+
<a href="https://developer.bitmovin.com/playback/docs/" target="_blank">Documentation</a>.
141+
</p>
142+
</div>
131143
</div>
144+
</div>
132145
</div>
133-
</div>
134-
<script type="text/javascript">
135-
bitmovin.player.Player.addModule(bitmovin.player["advertising-bitmovin"].default);
136-
137-
const adTags = [{
138-
url: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=',
139-
type: 'vmap',
140-
position: 'pre',
141-
}, {
142-
url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
143-
type: 'vast',
144-
position: '50%',
145-
}];
146-
147-
const playerElement = document.querySelector('#player');
148-
const playerConfiguration = {
149-
key: 'YOUR_PLAYER_KEY_HERE',
150-
ui: false,
151-
advertising: {},
152-
};
153-
154-
const sourceConfig = {
155-
title: 'Bitmovin Player',
156-
description: 'Ad Breaks are shown on the seek bar',
157-
dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
158-
hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
159-
};
160-
161-
const player = new bitmovin.player.Player(playerElement, playerConfiguration);
162-
const myUiManager = new bitmovin.playerui.UIFactory.buildDefaultUI(player);
163-
164-
player.on(bitmovin.player.PlayerEvent.SourceLoaded, () => {
165-
adTags.forEach(adTag => {
166-
player.ads.schedule({
167-
tag: {
168-
url: adTag.url,
169-
type: adTag.type,
146+
<script type="text/javascript">
147+
bitmovin.player.Player.addModule(bitmovin.player['advertising-bitmovin'].default);
148+
149+
const adTags = [
150+
{
151+
url: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=',
152+
type: 'vmap',
153+
position: 'pre',
154+
},
155+
{
156+
url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
157+
type: 'vast',
158+
position: '50%',
170159
},
171-
position: adTag.position,
172-
}).then((adBreak) => {
173-
adBreak.forEach(ad => {
174-
const time = ad.scheduleTime >= player.getDuration() ? player.getDuration() : ad.scheduleTime;
175-
myUiManager.addTimelineMarker({ time: time, title: 'Ad Break', cssClasses: ['seekbar-marker-ads'] });
160+
];
161+
162+
const playerElement = document.querySelector('#player');
163+
const playerConfiguration = {
164+
key: 'YOUR_PLAYER_KEY_HERE',
165+
ui: false,
166+
advertising: {},
167+
};
168+
169+
const sourceConfig = {
170+
title: 'Bitmovin Player',
171+
description: 'Ad Breaks are shown on the seek bar',
172+
dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
173+
hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
174+
};
175+
176+
const player = new bitmovin.player.Player(playerElement, playerConfiguration);
177+
const myUiManager = new bitmovin.playerui.UIFactory.buildDefaultUI(player);
178+
179+
player.on(bitmovin.player.PlayerEvent.SourceLoaded, () => {
180+
adTags.forEach(adTag => {
181+
player.ads
182+
.schedule({
183+
tag: {
184+
url: adTag.url,
185+
type: adTag.type,
186+
},
187+
position: adTag.position,
188+
})
189+
.then(adBreak => {
190+
adBreak.forEach(ad => {
191+
const time = ad.scheduleTime >= player.getDuration() ? player.getDuration() : ad.scheduleTime;
192+
myUiManager.addTimelineMarker({
193+
time: time,
194+
title: 'Ad Break',
195+
cssClasses: ['seekbar-marker-ads'],
196+
});
197+
});
198+
});
176199
});
177200
});
178-
});
179-
});
180201

181-
player.load(sourceConfig);
182-
</script>
183-
</body>
202+
player.load(sourceConfig);
203+
</script>
204+
</body>
184205
</html>
185-

0 commit comments

Comments
 (0)