/
multi-track-captions.html
187 lines (170 loc) · 7.95 KB
/
multi-track-captions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Multiple Language Timed Text Sample</title>
<meta name="description" content="" />
<link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
<script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
<script src="../../dist/dash.all.debug.js"></script>
<!--dash.all.min.js should be used in production over dash.all.debug.js
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->
<script class="code">
var EXTERNAL_CAPTION_URL = "https://dash.akamaized.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd", // need to manually seek to get stream to start... issue with MPD but only sample with multi adaptations for external sidecar caption text xml
FRAGMENTED_CAPTION_URL = "https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
videoElement,
controlbar,
player;
function init() {
var TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
videoElement = document.querySelector(".videoContainer video");
player = dashjs.MediaPlayer().create();
player.initialize(videoElement);
player.attachTTMLRenderingDiv(TTMLRenderingDiv);
player.on('currentTrackChanged', function(e) {
if (e.newMediaInfo.type === 'fragmentedText') {
setTimeout(showDomStorage, 0);
}
});
controlbar = new ControlBar(player); // Checkout ControlBar.js for more info on how to target/add text tracks to UI
controlbar.initialize();
var checkbox = document.getElementById("textDefaultEnabled");
checkbox.indeterminate = true;
document.getElementById("lastMediaSettingsCachingInfoEnabled").checked = player.getSettings().streaming.lastMediaSettingsCachingInfo.enabled;
showDomStorage();
}
function showDomStorage() {
document.getElementById("domStorage").innerHTML = localStorage.getItem('dashjs_fragmentedText_settings');
}
function play() {
var url = FRAGMENTED_CAPTION_URL;
player.attachSource(url);
setTextDefaultEnabled();
setLang();
player.play();
showDomStorage();
}
function setTextDefaultEnabled() {
var checkbox = document.getElementById("textDefaultEnabled");
if (!checkbox.indeterminate) {
document.getElementById("textDefaultEnabledValue").innerHTML = checkbox.checked;
player.setTextDefaultEnabled(checkbox.checked);
} else {
document.getElementById("textDefaultEnabledValue").innerHTML = 'undefined';
}
}
function setLang() {
var lang = document.getElementById("textSettings").value;
var role = null;
if (lang) {
if (lang.indexOf('-') != -1) {
var values = lang.split('-');
lang = values[0];
role = values[1];
}
player.setInitialMediaSettingsFor('fragmentedText', {
lang: lang,
role: role
});
}
}
function setLastMediaSettingsCachingInfoEnabled() {
var checkbox = document.getElementById("lastMediaSettingsCachingInfoEnabled");
player.updateSettings({
streaming: {
lastMediaSettingsCachingInfo: { enabled: checkbox.checked }
}
})
}
function clearDomStorage() {
localStorage.removeItem('dashjs_fragmentedText_settings');
showDomStorage();
}
</script>
<style>
video {
width: 100%;
}
.dash-video-player {
width: 640px;
}
.settings {
clear: both;
}
.settings>div {
padding: 5px 0;
}
label {
font-size: 1.1em;
display: block;
}
</style>
<body onload="init()">
<div class="dash-video-player code">
<div class="videoContainer" id="videoContainer">
<video preload="auto"> </video>
<div id="ttml-rendering-div"></div>
<div id="videoController" class="video-controller unselectable">
<div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
<span id="iconPlayPause" class="icon-play"></span>
</div>
<span id="videoTime" class="time-display">00:00:00</span>
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
<span class="icon-fullscreen-enter"></span>
</div>
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
<span class="icon-bitrate"></span>
</div>
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
<span id="iconMute" class="icon-mute-off"></span>
</div>
<div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
<span class="icon-tracks"></span>
</div>
<div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
<span class="icon-caption"></span>
</div>
<span id="videoDuration" class="duration-display">00:00:00</span>
<div class="seekContainer">
<div id="seekbar" class="seekbar seekbar-complete">
<div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
<div id="seekbar-play" class="seekbar seekbar-play"></div>
</div>
</div>
</div>
</div>
<div class="settings">
<div>
<button onclick="play()">play</button>
</div>
<div>
<label>textDefaultEnabled</label>
<input type="checkbox" id="textDefaultEnabled" onchange="setTextDefaultEnabled()"/> <span id="textDefaultEnabledValue">undefined</span>
</div>
<div>
<label>initial settings Language/Role </label>
<select onchange="setLang()" id="textSettings">
<option value="">-- unset initial lang and role --</option>
<option value="eng-subtitle">eng - subtitles</option>
<option value="eng-caption">eng - captions</option>
<option value="swe">swe - subtitles</option>
<option value="qbb">qbb - subtitles</option>
<option value="nor">nor - subtitles</option>
</select>
</div>
<div>
<label>streaming.lastMediaSettingsCachingInfo.enabled</label>
<input type="checkbox" id="lastMediaSettingsCachingInfoEnabled" onchange="setLastMediaSettingsCachingInfoEnabled()"/>
</div>
<div>
<label>localStorage content</label>
<div id="domStorage"></div>
<button onclick="clearDomStorage()">Clear localStorage</button>
</div>
</div>
</div>
<script src="../highlighter.js"></script>
</body>
</html>