Skip to content

Commit bd87d18

Browse files
ryanmccartneyryanmccartney
committed
Add styling example to samples
1 parent 10c739d commit bd87d18

File tree

2 files changed

+215
-1
lines changed

2 files changed

+215
-1
lines changed

‎samples/captioning/ttml-ebutt-styling.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>TTML Adjusting Text Size</title>
6+
<script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
7+
<script src="../../dist/dash.all.debug.js"></script>
8+
9+
<!-- Bootstrap core CSS -->
10+
<link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
11+
<link href="../lib/main.css" rel="stylesheet">
12+
13+
<link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
14+
15+
<style>
16+
video {
17+
width: 100%;
18+
}
19+
20+
.dash-video-player {
21+
position: relative; /* This position relative is needed to position the menus */
22+
margin: 0 auto;
23+
line-height: 1.0;
24+
}
25+
</style>
26+
27+
<script>
28+
let player;
29+
const url = "https://rdmedia.bbc.co.uk/elephants_dream/1/client_manifest-all.mpd";
30+
31+
const config = {
32+
"streaming": {
33+
"text":{
34+
"imsc":{
35+
"enableRollUp": false,
36+
"displayForcedOnlyMode": false,
37+
"options":{
38+
"sizeAdjust": 0,
39+
"lineHeightAdjust":0,
40+
"backgroundOpacityScale":0
41+
},
42+
},
43+
},
44+
},
45+
};
46+
47+
48+
const showConfig = () =>{
49+
document.querySelector("#player-config").innerHTML = JSON.stringify(config, null, 2);
50+
}
51+
52+
const updatePlayerSettings = () => {
53+
54+
config.streaming.text.imsc = {
55+
enableRollUp: document.querySelector("#imsc-enableRollUp").checked ? true: false,
56+
displayForcedOnlyMode: document.querySelector("#imsc-displayForcedOnlyMode").checked ? true: false,
57+
options:{
58+
sizeAdjust: parseFloat(document.querySelector("#imsc-option-sizeAdjust").value),
59+
lineHeightAdjust: parseFloat(document.querySelector("#imsc-option-lineHeightAdjust").value),
60+
backgroundOpacityScale: parseFloat(document.querySelector("#imsc-option-backgroundOpacityScale").value),
61+
},
62+
}
63+
64+
player.updateSettings(config);
65+
showConfig()
66+
}
67+
68+
const init = ()=> {
69+
// Get required elements from the DOM
70+
const video = document.querySelector('video');
71+
const TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
72+
73+
// Create and initialise player
74+
player = dashjs.MediaPlayer().create();
75+
player.initialize(video, url, true);
76+
player.attachTTMLRenderingDiv(TTMLRenderingDiv);
77+
updatePlayerSettings();
78+
79+
// Add some UI
80+
const controlbar = new ControlBar(player);
81+
controlbar.initialize();
82+
}
83+
84+
</script>
85+
</head>
86+
<body>
87+
88+
<main>
89+
<div class="container py-4">
90+
<header class="pb-3 mb-4 border-bottom">
91+
<img class=""
92+
src="../lib/img/dashjs-logo.png"
93+
width="200">
94+
</header>
95+
<div class="row">
96+
<div class="col-md-4">
97+
<div class="h-100 p-4 bg-light border rounded-3">
98+
<h3>TTML ENBUTT Styling</h3>
99+
<p>Example showing content with TTML captions and the ability to adjust their styling.</p>
100+
101+
<div class="row">
102+
103+
<h6>IMSC Settings</h6>
104+
105+
<div class="input-group input-group-sm mt-1">
106+
<div class="form-check mb-3">
107+
<input onchange="updatePlayerSettings()" class="form-check-input" type="checkbox" id="imsc-enableRollUp">
108+
<label class="form-check-label" for="imsc-enableRollUp">
109+
Enable Rollup
110+
</label>
111+
</div>
112+
113+
<div class="form-check mb-3">
114+
<input onchange="updatePlayerSettings()" class="form-check-input" type="checkbox" id="imsc-displayForcedOnlyMode">
115+
<label class="form-check-label" for="imsc-displayForcedOnlyMode">
116+
Display Forced Only Mode
117+
</label>
118+
</div>
119+
</div>
120+
121+
<div class="input-group input-group-sm mb-3">
122+
<span class="input-group-text"> Size Adjust</span>
123+
<input onchange="updatePlayerSettings()" id="imsc-option-sizeAdjust" class="form-control" value="1"
124+
step="0.1" min="0" type="number">
125+
</div>
126+
127+
<div class="input-group input-group-sm mb-3">
128+
<span class="input-group-text"> Line Height Adjust</span>
129+
<input onchange="updatePlayerSettings()" id="imsc-option-lineHeightAdjust" class="form-control" value="1"
130+
step="0.1" min="0" type="number">
131+
</div>
132+
133+
<div class="input-group input-group-sm mb-3">
134+
<span class="input-group-text"> Background Opacity Scale</span>
135+
<input onchange="updatePlayerSettings()" id="imsc-option-backgroundOpacityScale" class="form-control" value="1"
136+
step="0.1" min="0" max="1" type="number">
137+
</div>
138+
139+
140+
</div>
141+
</div>
142+
</div>
143+
<div class="col-md-8">
144+
<div class="dash-video-player">
145+
<div class="videoContainer" id="videoContainer">
146+
<video preload="auto" autoplay></video>
147+
<div id="ttml-rendering-div"></div>
148+
<div id="videoController" class="video-controller unselectable">
149+
<div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
150+
<span id="iconPlayPause" class="icon-play"></span>
151+
</div>
152+
<span id="videoTime" class="time-display">00:00:00</span>
153+
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
154+
<span class="icon-fullscreen-enter"></span>
155+
</div>
156+
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
157+
<span class="icon-bitrate"></span>
158+
</div>
159+
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
160+
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
161+
<span id="iconMute" class="icon-mute-off"></span>
162+
</div>
163+
<div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
164+
<span class="icon-tracks"></span>
165+
</div>
166+
<div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
167+
<span class="icon-caption"></span>
168+
</div>
169+
<span id="videoDuration" class="duration-display">00:00:00</span>
170+
<div class="seekContainer">
171+
<div id="seekbar" class="seekbar seekbar-complete">
172+
<div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
173+
<div id="seekbar-play" class="seekbar seekbar-play"></div>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
</div>
181+
<div class="row">
182+
<div class="pt-4 col-md-12">
183+
<div class="p-4 bg-light border rounded-3">
184+
<h6>Player Config</h6>
185+
<br>
186+
<pre><code class="text-monospace" id="player-config" data-lang="json"></code></pre>
187+
</div>
188+
</div>
189+
</div>
190+
<footer class="pt-3 mt-4 text-muted border-top">
191+
&copy; DASH-IF
192+
</footer>
193+
</div>
194+
</main>
195+
<script>
196+
document.addEventListener('DOMContentLoaded', function () {
197+
init();
198+
});
199+
</script>
200+
<script src="../highlighter.js"></script>
201+
</body>
202+
</html>

‎samples/samples.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -501,6 +501,18 @@
501501
"Audio"
502502
]
503503
},
504+
{
505+
"title": "TTML EBU caption styling",
506+
"description": "Example showing content with TTML captions and the ability to adjust their style.",
507+
"href": "captioning/ttml-ebutt-styling.html",
508+
"image": "lib/img/elephant-1.jpg",
509+
"labels": [
510+
"VoD",
511+
"Fragmented text",
512+
"Video",
513+
"Audio"
514+
]
515+
},
504516
{
505517
"title": "WebVTT Custom Rendering",
506518
"description": "This example shows how content with VTT captions can be played back by the dash.js player using the external vtt.js library. This enables VTT support on devices that do not provide native VTT support.",
@@ -802,4 +814,4 @@
802814
}
803815
]
804816
}
805-
]
817+
]

0 commit comments

Comments
 (0)