@mediakind/mkplayer 1.0.14 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/LabelConfig.d.ts +4 -0
- package/dist/MKPlayer.d.ts +3 -1
- package/dist/MKPlayerConfiguration.d.ts +2 -0
- package/dist/MKStream.d.ts +7 -1
- package/dist/URLHelper.d.ts +5 -0
- package/dist/events/UrlType.d.ts +4 -0
- package/dist/lib/LabelConfig.d.ts +4 -0
- package/dist/lib/LabelConfig.js +3 -0
- package/dist/lib/LabelConfig.js.map +1 -0
- package/dist/lib/MKPlayer.d.ts +3 -1
- package/dist/lib/MKPlayer.js +75 -16
- package/dist/lib/MKPlayer.js.map +1 -1
- package/dist/lib/MKPlayerConfiguration.d.ts +2 -0
- package/dist/lib/MKStream.d.ts +7 -1
- package/dist/lib/MKStream.js +20 -1
- package/dist/lib/MKStream.js.map +1 -1
- package/dist/lib/URLHelper.d.ts +5 -0
- package/dist/lib/URLHelper.js +70 -0
- package/dist/lib/URLHelper.js.map +1 -0
- package/dist/lib/events/UrlType.d.ts +4 -0
- package/dist/lib/events/UrlType.js +9 -0
- package/dist/lib/events/UrlType.js.map +1 -0
- package/dist/lib-esm/LabelConfig.d.ts +4 -0
- package/dist/lib-esm/LabelConfig.js +2 -0
- package/dist/lib-esm/LabelConfig.js.map +1 -0
- package/dist/lib-esm/MKPlayer.d.ts +3 -1
- package/dist/lib-esm/MKPlayer.js +75 -16
- package/dist/lib-esm/MKPlayer.js.map +1 -1
- package/dist/lib-esm/MKPlayerConfiguration.d.ts +2 -0
- package/dist/lib-esm/MKStream.d.ts +7 -1
- package/dist/lib-esm/MKStream.js +20 -1
- package/dist/lib-esm/MKStream.js.map +1 -1
- package/dist/lib-esm/URLHelper.d.ts +5 -0
- package/dist/lib-esm/URLHelper.js +67 -0
- package/dist/lib-esm/URLHelper.js.map +1 -0
- package/dist/lib-esm/events/UrlType.d.ts +4 -0
- package/dist/lib-esm/events/UrlType.js +6 -0
- package/dist/lib-esm/events/UrlType.js.map +1 -0
- package/dist/mkplayer.js +1 -1
- package/doc/assets/js/search.json +1 -1
- package/doc/classes/mkplayer.html +23 -20
- package/doc/enums/mkevent.html +4 -1
- package/doc/enums/urltype.html +180 -0
- package/doc/globals.html +6 -2
- package/doc/index.html +19 -2
- package/doc/interfaces/bufferlevel.html +4 -1
- package/doc/interfaces/labelconfig.html +198 -0
- package/doc/interfaces/mkplayereventcallback.html +4 -1
- package/doc/interfaces/subtitletrack.html +4 -1
- package/index.html +58 -19
- package/multi-camera.html +1 -1
- package/package.json +3 -3
- package/src/LabelConfig.ts +14 -0
- package/src/MKPlayer.ts +77 -24
- package/src/MKPlayerConfiguration.ts +7 -0
- package/src/MKStream.ts +27 -1
- package/src/URLHelper.ts +79 -0
- package/src/events/UrlType.ts +7 -0
- package/doc/interfaces/mkplayerconfiguration.html +0 -290
- package/mkplayer-ui.js +0 -12052
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="default no-js">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<title>LabelConfig | MKPlayer</title>
|
|
7
|
+
<meta name="description" content="Documentation for MKPlayer">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
<link rel="stylesheet" href="../assets/css/main.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<header>
|
|
13
|
+
<div class="tsd-page-toolbar">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<div class="table-wrap">
|
|
16
|
+
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
|
|
17
|
+
<div class="field">
|
|
18
|
+
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
|
19
|
+
<input id="tsd-search-field" type="text" />
|
|
20
|
+
</div>
|
|
21
|
+
<ul class="results">
|
|
22
|
+
<li class="state loading">Preparing search index...</li>
|
|
23
|
+
<li class="state failure">The search index is not available</li>
|
|
24
|
+
</ul>
|
|
25
|
+
<a href="../index.html" class="title">MKPlayer</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="table-cell" id="tsd-widgets">
|
|
28
|
+
<div id="tsd-filter">
|
|
29
|
+
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
|
30
|
+
<div class="tsd-filter-group">
|
|
31
|
+
<div class="tsd-select" id="tsd-filter-visibility">
|
|
32
|
+
<span class="tsd-select-label">All</span>
|
|
33
|
+
<ul class="tsd-select-list">
|
|
34
|
+
<li data-value="public">Public</li>
|
|
35
|
+
<li data-value="protected">Public/Protected</li>
|
|
36
|
+
<li data-value="private" class="selected">All</li>
|
|
37
|
+
</ul>
|
|
38
|
+
</div>
|
|
39
|
+
<input type="checkbox" id="tsd-filter-inherited" checked />
|
|
40
|
+
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
|
|
41
|
+
<input type="checkbox" id="tsd-filter-externals" checked />
|
|
42
|
+
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="tsd-page-title">
|
|
51
|
+
<div class="container">
|
|
52
|
+
<ul class="tsd-breadcrumb">
|
|
53
|
+
<li>
|
|
54
|
+
<a href="../globals.html">Globals</a>
|
|
55
|
+
</li>
|
|
56
|
+
<li>
|
|
57
|
+
<a href="labelconfig.html">LabelConfig</a>
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
<h1>Interface LabelConfig</h1>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</header>
|
|
64
|
+
<div class="container container-main">
|
|
65
|
+
<div class="row">
|
|
66
|
+
<div class="col-8 col-content">
|
|
67
|
+
<section class="tsd-panel tsd-comment">
|
|
68
|
+
<div class="tsd-comment tsd-typography">
|
|
69
|
+
<div class="lead">
|
|
70
|
+
<p>Config to change the labels in the player dropdown</p>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
<section class="tsd-panel tsd-hierarchy">
|
|
75
|
+
<h3>Hierarchy</h3>
|
|
76
|
+
<ul class="tsd-hierarchy">
|
|
77
|
+
<li>
|
|
78
|
+
<span class="target">LabelConfig</span>
|
|
79
|
+
</li>
|
|
80
|
+
</ul>
|
|
81
|
+
</section>
|
|
82
|
+
<section class="tsd-panel-group tsd-index-group">
|
|
83
|
+
<h2>Index</h2>
|
|
84
|
+
<section class="tsd-panel tsd-index-panel">
|
|
85
|
+
<div class="tsd-index-content">
|
|
86
|
+
<section class="tsd-index-section ">
|
|
87
|
+
<h3>Properties</h3>
|
|
88
|
+
<ul class="tsd-index-list">
|
|
89
|
+
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="labelconfig.html#audio" class="tsd-kind-icon">audio</a></li>
|
|
90
|
+
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="labelconfig.html#captions" class="tsd-kind-icon">captions</a></li>
|
|
91
|
+
</ul>
|
|
92
|
+
</section>
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
</section>
|
|
96
|
+
<section class="tsd-panel-group tsd-member-group ">
|
|
97
|
+
<h2>Properties</h2>
|
|
98
|
+
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
|
|
99
|
+
<a name="audio" class="tsd-anchor"></a>
|
|
100
|
+
<h3><span class="tsd-flag ts-flagOptional">Optional</span> audio</h3>
|
|
101
|
+
<div class="tsd-signature tsd-kind-icon">audio<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span></div>
|
|
102
|
+
<aside class="tsd-sources">
|
|
103
|
+
<ul>
|
|
104
|
+
<li>Defined in LabelConfig.ts:8</li>
|
|
105
|
+
</ul>
|
|
106
|
+
</aside>
|
|
107
|
+
<div class="tsd-comment tsd-typography">
|
|
108
|
+
<div class="lead">
|
|
109
|
+
<p>list of labels to use in the audio dropdown</p>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</section>
|
|
113
|
+
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
|
|
114
|
+
<a name="captions" class="tsd-anchor"></a>
|
|
115
|
+
<h3><span class="tsd-flag ts-flagOptional">Optional</span> captions</h3>
|
|
116
|
+
<div class="tsd-signature tsd-kind-icon">captions<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span></div>
|
|
117
|
+
<aside class="tsd-sources">
|
|
118
|
+
<ul>
|
|
119
|
+
<li>Defined in LabelConfig.ts:13</li>
|
|
120
|
+
</ul>
|
|
121
|
+
</aside>
|
|
122
|
+
<div class="tsd-comment tsd-typography">
|
|
123
|
+
<div class="lead">
|
|
124
|
+
<p>list of labels to use in the captions dropdown</p>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</section>
|
|
128
|
+
</section>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
131
|
+
<nav class="tsd-navigation primary">
|
|
132
|
+
<ul>
|
|
133
|
+
<li class="globals ">
|
|
134
|
+
<a href="../globals.html"><em>Globals</em></a>
|
|
135
|
+
</li>
|
|
136
|
+
</ul>
|
|
137
|
+
</nav>
|
|
138
|
+
<nav class="tsd-navigation secondary menu-sticky">
|
|
139
|
+
<ul class="before-current">
|
|
140
|
+
<li class=" tsd-kind-enum">
|
|
141
|
+
<a href="../enums/mkevent.html" class="tsd-kind-icon">MKEvent</a>
|
|
142
|
+
</li>
|
|
143
|
+
<li class=" tsd-kind-enum">
|
|
144
|
+
<a href="../enums/urltype.html" class="tsd-kind-icon">Url<wbr>Type</a>
|
|
145
|
+
</li>
|
|
146
|
+
<li class=" tsd-kind-class">
|
|
147
|
+
<a href="../classes/mkplayer.html" class="tsd-kind-icon">MKPlayer</a>
|
|
148
|
+
</li>
|
|
149
|
+
<li class=" tsd-kind-interface">
|
|
150
|
+
<a href="bufferlevel.html" class="tsd-kind-icon">Buffer<wbr>Level</a>
|
|
151
|
+
</li>
|
|
152
|
+
</ul>
|
|
153
|
+
<ul class="current">
|
|
154
|
+
<li class="current tsd-kind-interface">
|
|
155
|
+
<a href="labelconfig.html" class="tsd-kind-icon">Label<wbr>Config</a>
|
|
156
|
+
<ul>
|
|
157
|
+
<li class=" tsd-kind-property tsd-parent-kind-interface">
|
|
158
|
+
<a href="labelconfig.html#audio" class="tsd-kind-icon">audio</a>
|
|
159
|
+
</li>
|
|
160
|
+
<li class=" tsd-kind-property tsd-parent-kind-interface">
|
|
161
|
+
<a href="labelconfig.html#captions" class="tsd-kind-icon">captions</a>
|
|
162
|
+
</li>
|
|
163
|
+
</ul>
|
|
164
|
+
</li>
|
|
165
|
+
</ul>
|
|
166
|
+
<ul class="after-current">
|
|
167
|
+
<li class=" tsd-kind-interface">
|
|
168
|
+
<a href="mkplayereventcallback.html" class="tsd-kind-icon">MKPlayer<wbr>Event<wbr>Callback</a>
|
|
169
|
+
</li>
|
|
170
|
+
<li class=" tsd-kind-interface">
|
|
171
|
+
<a href="subtitletrack.html" class="tsd-kind-icon">Subtitle<wbr>Track</a>
|
|
172
|
+
</li>
|
|
173
|
+
</ul>
|
|
174
|
+
</nav>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
<footer class="with-border-bottom">
|
|
179
|
+
<div class="container">
|
|
180
|
+
<h2>Legend</h2>
|
|
181
|
+
<div class="tsd-legend-group">
|
|
182
|
+
<ul class="tsd-legend">
|
|
183
|
+
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
|
|
184
|
+
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
|
|
185
|
+
</ul>
|
|
186
|
+
<ul class="tsd-legend">
|
|
187
|
+
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
|
|
188
|
+
</ul>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</footer>
|
|
192
|
+
<div class="container tsd-generator">
|
|
193
|
+
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="overlay"></div>
|
|
196
|
+
<script src="../assets/js/main.js"></script>
|
|
197
|
+
</body>
|
|
198
|
+
</html>
|
|
@@ -120,6 +120,9 @@
|
|
|
120
120
|
<li class=" tsd-kind-enum">
|
|
121
121
|
<a href="../enums/mkevent.html" class="tsd-kind-icon">MKEvent</a>
|
|
122
122
|
</li>
|
|
123
|
+
<li class=" tsd-kind-enum">
|
|
124
|
+
<a href="../enums/urltype.html" class="tsd-kind-icon">Url<wbr>Type</a>
|
|
125
|
+
</li>
|
|
123
126
|
<li class=" tsd-kind-class">
|
|
124
127
|
<a href="../classes/mkplayer.html" class="tsd-kind-icon">MKPlayer</a>
|
|
125
128
|
</li>
|
|
@@ -127,7 +130,7 @@
|
|
|
127
130
|
<a href="bufferlevel.html" class="tsd-kind-icon">Buffer<wbr>Level</a>
|
|
128
131
|
</li>
|
|
129
132
|
<li class=" tsd-kind-interface">
|
|
130
|
-
<a href="
|
|
133
|
+
<a href="labelconfig.html" class="tsd-kind-icon">Label<wbr>Config</a>
|
|
131
134
|
</li>
|
|
132
135
|
</ul>
|
|
133
136
|
<ul class="current">
|
|
@@ -140,6 +140,9 @@
|
|
|
140
140
|
<li class=" tsd-kind-enum">
|
|
141
141
|
<a href="../enums/mkevent.html" class="tsd-kind-icon">MKEvent</a>
|
|
142
142
|
</li>
|
|
143
|
+
<li class=" tsd-kind-enum">
|
|
144
|
+
<a href="../enums/urltype.html" class="tsd-kind-icon">Url<wbr>Type</a>
|
|
145
|
+
</li>
|
|
143
146
|
<li class=" tsd-kind-class">
|
|
144
147
|
<a href="../classes/mkplayer.html" class="tsd-kind-icon">MKPlayer</a>
|
|
145
148
|
</li>
|
|
@@ -147,7 +150,7 @@
|
|
|
147
150
|
<a href="bufferlevel.html" class="tsd-kind-icon">Buffer<wbr>Level</a>
|
|
148
151
|
</li>
|
|
149
152
|
<li class=" tsd-kind-interface">
|
|
150
|
-
<a href="
|
|
153
|
+
<a href="labelconfig.html" class="tsd-kind-icon">Label<wbr>Config</a>
|
|
151
154
|
</li>
|
|
152
155
|
<li class=" tsd-kind-interface">
|
|
153
156
|
<a href="mkplayereventcallback.html" class="tsd-kind-icon">MKPlayer<wbr>Event<wbr>Callback</a>
|
package/index.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang='en'>
|
|
3
3
|
<head>
|
|
4
|
-
<title>MKPlayer 1.0.
|
|
4
|
+
<title>MKPlayer 1.0.16</title>
|
|
5
5
|
<meta charset='UTF-8'/>
|
|
6
6
|
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
|
|
7
7
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
@@ -88,6 +88,9 @@
|
|
|
88
88
|
<label class='btn btn-outline-secondary active'>
|
|
89
89
|
<input type='radio' name='options' id='option-live' autocomplete='off' checked>Live
|
|
90
90
|
</label>
|
|
91
|
+
<label class='btn btn-outline-secondary'>
|
|
92
|
+
<input type='radio' name='options' id='option-live-subtitle' autocomplete='off' checked>Live Subs
|
|
93
|
+
</label>
|
|
91
94
|
<label class='btn btn-outline-secondary'>
|
|
92
95
|
<input type='radio' name='options' id='option-dash-vod' autocomplete='off'>DASH VOD
|
|
93
96
|
</label>
|
|
@@ -152,14 +155,14 @@
|
|
|
152
155
|
</div>
|
|
153
156
|
</div>
|
|
154
157
|
<div class='row'>
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
+
<div class='col-12'>
|
|
159
|
+
<p id='wallClockTime'>Wall Clock Time: unknown</p>
|
|
160
|
+
</div>
|
|
158
161
|
</div>
|
|
159
162
|
<div class='row'>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
+
<div class='col-12'>
|
|
164
|
+
<p id='segmentTime'>Segment Time: unknown</p>
|
|
165
|
+
</div>
|
|
163
166
|
</div>
|
|
164
167
|
<div class='row'>
|
|
165
168
|
<div class='col-12'>
|
|
@@ -181,6 +184,7 @@
|
|
|
181
184
|
let mp4Button2 = $('#option-mp4-2').parent();
|
|
182
185
|
let mp4Button3 = $('#option-mp4-3').parent();
|
|
183
186
|
let liveButton = $('#option-live').parent();
|
|
187
|
+
let liveSubtitleButton = $('#option-live-subtitle').parent();
|
|
184
188
|
let errorButton = $('#option-error').parent();
|
|
185
189
|
let destroyButton = $('#option-destroy').parent();
|
|
186
190
|
let customStreamButton = $('#load-custom-steam');
|
|
@@ -210,7 +214,7 @@
|
|
|
210
214
|
var seconds = "0" + date.getSeconds();
|
|
211
215
|
var millis = "0" + date.getMilliseconds();
|
|
212
216
|
|
|
213
|
-
var formattedTime =
|
|
217
|
+
var formattedTime = date.toDateString() + ' ' + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2) + ':' + millis.substr(-3);
|
|
214
218
|
|
|
215
219
|
return formattedTime;
|
|
216
220
|
|
|
@@ -277,6 +281,14 @@
|
|
|
277
281
|
load(liveId3Source);
|
|
278
282
|
});
|
|
279
283
|
|
|
284
|
+
liveSubtitleButton.on('click', function() {
|
|
285
|
+
liveSubtitleButton.button('toggle');
|
|
286
|
+
deselectCustomLoadButton();
|
|
287
|
+
|
|
288
|
+
mkPlayer.unload();
|
|
289
|
+
load(liveSubtitle);
|
|
290
|
+
});
|
|
291
|
+
|
|
280
292
|
customStreamButton.on('click', function() {
|
|
281
293
|
// remove active button of group
|
|
282
294
|
$($('.btn-group-toggle .active')[0]).removeClass('active');
|
|
@@ -306,14 +318,33 @@
|
|
|
306
318
|
});
|
|
307
319
|
|
|
308
320
|
let liveSource = {
|
|
309
|
-
primaryUrl: "
|
|
321
|
+
primaryUrl: "https://cdn-0573.aas.mediakind.com/cmaftkn/CES-Hero/index.m3u8",
|
|
322
|
+
cdnFailoverPercent: 10,
|
|
323
|
+
assetIdentifier: 'HLS Live',
|
|
324
|
+
labelConfig: {
|
|
325
|
+
audio: {'en': 'English', 'mis': 'Audio Descriptions'},
|
|
326
|
+
captions: {'ENG': 'English', 'GER': 'German'},
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
let liveSubtitle = {
|
|
331
|
+
primaryUrl: "https://cesstatic.blob.core.windows.net/hls/Test1/master.m3u8?abc=123",
|
|
310
332
|
cdnFailoverPercent: 10,
|
|
311
333
|
assetIdentifier: 'DASH Live',
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
334
|
+
subtitleTracks: [
|
|
335
|
+
{
|
|
336
|
+
url: "https://cesstatic.blob.core.windows.net/hls/Test1/master_captionENG.m3u8",
|
|
337
|
+
language: 'ENG',
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
url: "https://cesstatic.blob.core.windows.net/hls/Test1/master_captionGER.m3u8",
|
|
341
|
+
language: 'GER',
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
url: "https://cesstatic.blob.core.windows.net/hls/Test1/master_captionTA.m3u8",
|
|
345
|
+
language: 'TA',
|
|
346
|
+
},
|
|
347
|
+
],
|
|
317
348
|
};
|
|
318
349
|
|
|
319
350
|
let liveId3Source = {
|
|
@@ -336,7 +367,7 @@
|
|
|
336
367
|
}],
|
|
337
368
|
assetIdentifier: 'DASH Subtitle',
|
|
338
369
|
poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
|
|
339
|
-
userId: 'badge1'
|
|
370
|
+
userId: 'badge1',
|
|
340
371
|
};
|
|
341
372
|
|
|
342
373
|
let dashVodSource = {
|
|
@@ -359,7 +390,7 @@
|
|
|
359
390
|
primaryUrl: 'https://mk-orionsedge.azureedge.net/test/hls/tos/index.m3u8',
|
|
360
391
|
cdnFailoverPercent: 0,
|
|
361
392
|
assetIdentifier: 'HLS Subtitle',
|
|
362
|
-
userId: 'badge3'
|
|
393
|
+
userId: 'badge3',
|
|
363
394
|
}
|
|
364
395
|
|
|
365
396
|
var vodSource = {
|
|
@@ -408,7 +439,15 @@
|
|
|
408
439
|
autoplay: true,
|
|
409
440
|
muted: true,
|
|
410
441
|
smallScreen: false,
|
|
411
|
-
key: '84dc4716-55f9-43fa-ae8e-6fa334c5189b'
|
|
442
|
+
key: '84dc4716-55f9-43fa-ae8e-6fa334c5189b',
|
|
443
|
+
|
|
444
|
+
refreshToken: (type) => {
|
|
445
|
+
if (type === 'primary') {
|
|
446
|
+
return 'hdnts=1234566787888'
|
|
447
|
+
}else if (type === 'secondary') {
|
|
448
|
+
return 'hdnts=jadfjahdfjahdsfjh'
|
|
449
|
+
}
|
|
450
|
+
},
|
|
412
451
|
};
|
|
413
452
|
|
|
414
453
|
let playerContainer = document.getElementById('testPlayer');
|
|
@@ -441,9 +480,9 @@
|
|
|
441
480
|
$('#audioBuffer').css('width', audioBufferLevel + '%').attr('aria-valuenow', audioBufferLevel);
|
|
442
481
|
$('#audioBuffer').text(audioBufferLevel)
|
|
443
482
|
|
|
444
|
-
$('#segmentTime').text('Segment Time: ' +
|
|
483
|
+
$('#segmentTime').text('Segment Time: ' + formatTimestamp(event.time))
|
|
445
484
|
|
|
446
|
-
$('#wallClockTime').text('Wall Clock Time: ' + formatTimestamp(Date.now()/1000))
|
|
485
|
+
$('#wallClockTime').text('Wall Clock Time: ' + formatTimestamp(Date.now() / 1000))
|
|
447
486
|
|
|
448
487
|
})
|
|
449
488
|
|
package/multi-camera.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang='en'>
|
|
3
3
|
<head>
|
|
4
|
-
<title>MKPlayer 1.0.
|
|
4
|
+
<title>MKPlayer 1.0.16</title>
|
|
5
5
|
<meta charset='UTF-8'/>
|
|
6
6
|
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
|
|
7
7
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mediakind/mkplayer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.16",
|
|
4
4
|
"description": "MediaKind Web Player",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"test": "jest",
|
|
24
24
|
"testWithCoverage": "jest --coverage",
|
|
25
25
|
"build:docs": "typedoc",
|
|
26
|
-
"deploy": "npm run build && npm run build:docs && azcopy copy --recursive dist 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy --recursive doc 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy index.html 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy ../mkplayer-react/src/mkplayer-ui.min.css 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy 'index.html' 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy 'multi-camera.html' 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D'
|
|
26
|
+
"deploy": "npm run build && npm run build:docs && azcopy copy --recursive dist 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy --recursive doc 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy index.html 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy ../mkplayer-react/src/mkplayer-ui.min.css 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy 'index.html' 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D' && azcopy copy 'multi-camera.html' 'https://mkplayer.blob.core.windows.net/$web?sp=racwdl&st=2020-10-23T03:41:09Z&se=2021-10-24T03:41:00Z&sv=2019-12-12&sr=c&sig=bSBP0oUHI6KzTwLwk195Jnrdnqh8GXEjqTAnAUmf4xA%3D'"
|
|
27
27
|
},
|
|
28
28
|
"author": "MediaKind",
|
|
29
29
|
"license": "ISC",
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"bitmovin-player": "8.49.0",
|
|
32
|
-
"bitmovin-player-ui": "3.
|
|
32
|
+
"bitmovin-player-ui": "3.22.0",
|
|
33
33
|
"fast-safe-stringify": "^2.0.7"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Config to change the labels in the player dropdown
|
|
3
|
+
*/
|
|
4
|
+
export interface LabelConfig {
|
|
5
|
+
/**
|
|
6
|
+
* list of labels to use in the audio dropdown
|
|
7
|
+
*/
|
|
8
|
+
audio?: Map<string, string>;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* list of labels to use in the captions dropdown
|
|
12
|
+
*/
|
|
13
|
+
captions?: Map<string, string>;
|
|
14
|
+
}
|
package/src/MKPlayer.ts
CHANGED
|
@@ -8,13 +8,16 @@ import { MKEvent } from './events/MKEvent';
|
|
|
8
8
|
import { BufferLevel } from './BufferLevel';
|
|
9
9
|
import { MKPlayerEventCallback } from './events/MKPlayerEventCallback';
|
|
10
10
|
import { Logger } from './Logger';
|
|
11
|
+
import { HttpRequest, HttpRequestType } from 'bitmovin-player/types/core/NetworkAPI';
|
|
12
|
+
import { UrlType } from './events/UrlType';
|
|
13
|
+
import { URLHelper } from './URLHelper';
|
|
11
14
|
|
|
12
15
|
/**
|
|
13
16
|
* MKPlayer is an HTML5 video player used for playback of HLS and DASH adaptive bitrate streams
|
|
14
17
|
*/
|
|
15
18
|
export class MKPlayer {
|
|
16
19
|
private player: PlayerAPI;
|
|
17
|
-
|
|
20
|
+
private stream: MKStream;
|
|
18
21
|
/**
|
|
19
22
|
* constructor used to create a new MKPlayer instance
|
|
20
23
|
*
|
|
@@ -31,20 +34,36 @@ export class MKPlayer {
|
|
|
31
34
|
analytics: {
|
|
32
35
|
key: '1c45ae9c-345e-4462-95e2-3e8faccd64f1',
|
|
33
36
|
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
ui_css: 'mkplayer-ui.min.css',
|
|
37
|
+
ui: {
|
|
38
|
+
disableAutoHideWhenHovered: true,
|
|
37
39
|
},
|
|
38
40
|
logs: {
|
|
39
41
|
level: LogLevel.OFF,
|
|
40
42
|
bitmovin: false,
|
|
41
43
|
},
|
|
44
|
+
network: {
|
|
45
|
+
preprocessHttpRequest: (type: HttpRequestType, request: HttpRequest) => {
|
|
46
|
+
if (type === 'manifest/hls/master' || type === 'manifest/hls/variant') {
|
|
47
|
+
if (typeof mkPlayerConfiguration.refreshToken === 'function') {
|
|
48
|
+
let urlType = this.stream.didFailOver ? UrlType.Secondary : UrlType.Primary;
|
|
49
|
+
let token = mkPlayerConfiguration.refreshToken(urlType);
|
|
50
|
+
console.log('[MKPlayer] Appending ' + urlType + ' token: ' + token);
|
|
51
|
+
request.url = URLHelper.appendToken(request.url, token);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return Promise.resolve(request);
|
|
55
|
+
},
|
|
56
|
+
preprocessHttpResponse: (type, response) => {
|
|
57
|
+
if (type === 'manifest/hls/master') {
|
|
58
|
+
let body = this.manipulateMasterPlaylist((response.body as string));
|
|
59
|
+
// @ts-ignore
|
|
60
|
+
response.body = body;
|
|
61
|
+
}
|
|
62
|
+
return Promise.resolve(response);
|
|
63
|
+
},
|
|
64
|
+
},
|
|
42
65
|
};
|
|
43
66
|
|
|
44
|
-
if (mkPlayerConfiguration.ui === false) {
|
|
45
|
-
playerConfig.ui = false;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
67
|
if (mkPlayerConfiguration.targetLatency > 0) {
|
|
49
68
|
playerConfig.live = {
|
|
50
69
|
lowLatency: {
|
|
@@ -68,7 +87,7 @@ export class MKPlayer {
|
|
|
68
87
|
if (mkPlayerConfiguration.smallScreen) {
|
|
69
88
|
UIFactory.buildDefaultSmallScreenUI(player);
|
|
70
89
|
} else {
|
|
71
|
-
UIFactory.buildDefaultUI(player);
|
|
90
|
+
UIFactory.buildDefaultUI(player, playerConfig.ui);
|
|
72
91
|
}
|
|
73
92
|
}
|
|
74
93
|
|
|
@@ -76,9 +95,7 @@ export class MKPlayer {
|
|
|
76
95
|
Logger.enable();
|
|
77
96
|
}
|
|
78
97
|
|
|
79
|
-
|
|
80
98
|
this.player = player;
|
|
81
|
-
|
|
82
99
|
console.log('%c MKPlayer ' + this.version() + ' www.mediakind.com', 'color: blue');
|
|
83
100
|
}
|
|
84
101
|
|
|
@@ -110,7 +127,8 @@ export class MKPlayer {
|
|
|
110
127
|
*/
|
|
111
128
|
load(stream: MKStream): Promise<void> {
|
|
112
129
|
let playerSource: SourceConfig;
|
|
113
|
-
|
|
130
|
+
this.stream = stream;
|
|
131
|
+
let url: string = this.selectUrl();
|
|
114
132
|
|
|
115
133
|
if (url.includes('.m3u8')) {
|
|
116
134
|
playerSource = {
|
|
@@ -130,6 +148,26 @@ export class MKPlayer {
|
|
|
130
148
|
playerSource.poster = stream.poster;
|
|
131
149
|
}
|
|
132
150
|
|
|
151
|
+
playerSource.labeling = {
|
|
152
|
+
hls: {
|
|
153
|
+
tracks: (track) => {
|
|
154
|
+
if (this.stream.labelConfig && this.stream.labelConfig.audio && this.stream.labelConfig.audio[track.lang]) {
|
|
155
|
+
return this.stream.labelConfig.audio[track.lang];
|
|
156
|
+
} else {
|
|
157
|
+
return track.lang;
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
subtitles: (track) => {
|
|
161
|
+
console.log(track);
|
|
162
|
+
if (this.stream.labelConfig && this.stream.labelConfig.captions && this.stream.labelConfig.captions[track.lang]) {
|
|
163
|
+
return this.stream.labelConfig.captions[track.lang];
|
|
164
|
+
} else {
|
|
165
|
+
return track.lang;
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
},
|
|
169
|
+
};
|
|
170
|
+
|
|
133
171
|
if (stream.assetIdentifier) {
|
|
134
172
|
playerSource.analytics = {
|
|
135
173
|
videoId: stream.assetIdentifier,
|
|
@@ -143,7 +181,7 @@ export class MKPlayer {
|
|
|
143
181
|
};
|
|
144
182
|
}
|
|
145
183
|
|
|
146
|
-
if (stream.subtitleTracks) {
|
|
184
|
+
if (stream.subtitleTracks && !stream.subtitleTracks[0].url.includes('.m3u8')) {
|
|
147
185
|
playerSource.subtitleTracks = stream.subtitleTracks.map((track) => <SubtitleTrack>{
|
|
148
186
|
lang: track.language,
|
|
149
187
|
url: track.url,
|
|
@@ -164,7 +202,6 @@ export class MKPlayer {
|
|
|
164
202
|
*/
|
|
165
203
|
off(eventType: MKEvent, callback: MKPlayerEventCallback): void {
|
|
166
204
|
let playerEventType = MKPlayer.mapEvent(eventType);
|
|
167
|
-
|
|
168
205
|
return this.player.off(playerEventType, callback);
|
|
169
206
|
}
|
|
170
207
|
|
|
@@ -176,7 +213,6 @@ export class MKPlayer {
|
|
|
176
213
|
*/
|
|
177
214
|
on(eventType: MKEvent, callback: MKPlayerEventCallback): void {
|
|
178
215
|
let playerEventType = MKPlayer.mapEvent(eventType);
|
|
179
|
-
|
|
180
216
|
return this.player.on(playerEventType, callback);
|
|
181
217
|
}
|
|
182
218
|
|
|
@@ -247,7 +283,6 @@ export class MKPlayer {
|
|
|
247
283
|
* sets the player's volume in the range of 0 (silent) to 100 (max volume)
|
|
248
284
|
*
|
|
249
285
|
* @param volume The volume to set between 0 and 100
|
|
250
|
-
|
|
251
286
|
*/
|
|
252
287
|
setVolume(volume: number): void {
|
|
253
288
|
this.player.setVolume(volume);
|
|
@@ -257,17 +292,19 @@ export class MKPlayer {
|
|
|
257
292
|
* returns the current player version
|
|
258
293
|
*/
|
|
259
294
|
version(): string {
|
|
260
|
-
return '1.0.
|
|
295
|
+
return '1.0.16';
|
|
261
296
|
}
|
|
262
297
|
|
|
263
|
-
private
|
|
298
|
+
private selectUrl(): string {
|
|
264
299
|
let rand = MKPlayer.getRandomInt(99);
|
|
265
|
-
if (
|
|
266
|
-
Logger.log('[MKPlayer] selecting secondary source url - ' +
|
|
267
|
-
|
|
300
|
+
if (this.stream.cdnFailoverPercent && this.stream.secondaryUrl && rand < this.stream.cdnFailoverPercent) {
|
|
301
|
+
Logger.log('[MKPlayer] selecting secondary source url - ' + this.stream.secondaryUrl);
|
|
302
|
+
this.stream.didFailOver = true;
|
|
303
|
+
return this.stream.secondaryUrl;
|
|
268
304
|
} else {
|
|
269
|
-
Logger.log('[MKPlayer] selecting primary source url - ' +
|
|
270
|
-
|
|
305
|
+
Logger.log('[MKPlayer] selecting primary source url - ' + this.stream.primaryUrl);
|
|
306
|
+
this.stream.didFailOver = false;
|
|
307
|
+
return this.stream.primaryUrl;
|
|
271
308
|
}
|
|
272
309
|
}
|
|
273
310
|
|
|
@@ -331,7 +368,23 @@ export class MKPlayer {
|
|
|
331
368
|
playerEventType = PlayerEvent.MetadataParsed;
|
|
332
369
|
break;
|
|
333
370
|
}
|
|
334
|
-
|
|
335
371
|
return playerEventType;
|
|
336
372
|
}
|
|
373
|
+
|
|
374
|
+
private manipulateMasterPlaylist(response: string): string {
|
|
375
|
+
let body = (response as string);
|
|
376
|
+
if (this.stream.subtitleTracks && this.stream.subtitleTracks[0].url.includes('.m3u8')) {
|
|
377
|
+
this.stream.subtitleTracks.forEach((track) => {
|
|
378
|
+
body = body.concat('\n#EXT-X-MEDIA:TYPE=SUBTITLES,'
|
|
379
|
+
+ 'NAME="' + track.language + '",'
|
|
380
|
+
+ 'DEFAULT=YES,'
|
|
381
|
+
+ 'AUTOSELECT=YES,'
|
|
382
|
+
+ 'FORCED=NO,'
|
|
383
|
+
+ 'LANGUAGE="' + track.language + '",GROUP-ID="Subtitles",'
|
|
384
|
+
+ 'URI="' + track.url + '"');
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
return body;
|
|
389
|
+
}
|
|
337
390
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* MKPlayer's configuration interface
|
|
3
3
|
*/
|
|
4
|
+
import { UrlType } from './events/UrlType';
|
|
5
|
+
|
|
4
6
|
export interface MKPlayerConfiguration {
|
|
5
7
|
/**
|
|
6
8
|
* Toggles debug output logging
|
|
@@ -36,4 +38,9 @@ export interface MKPlayerConfiguration {
|
|
|
36
38
|
* license key for the video player
|
|
37
39
|
*/
|
|
38
40
|
key: string;
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Refresh the CDN Token
|
|
44
|
+
*/
|
|
45
|
+
refreshToken?: (type: UrlType) => string;
|
|
39
46
|
}
|