@mediakind/mkplayer 1.0.10 → 1.0.12
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 +22 -10
- package/azure-pipelines.yml +1 -16
- package/dist/MKPlayer.d.ts +3 -0
- package/dist/MKPlayerConfiguration.d.ts +3 -0
- package/dist/events/MKEvent.d.ts +4 -1
- package/dist/index.d.ts +2 -0
- package/dist/lib/MKPlayer.d.ts +3 -0
- package/dist/lib/MKPlayer.js +48 -19
- package/dist/lib/MKPlayer.js.map +1 -1
- package/dist/lib/MKPlayerConfiguration.d.ts +3 -0
- package/dist/lib/events/MKEvent.d.ts +4 -1
- package/dist/lib/events/MKEvent.js +3 -0
- package/dist/lib/events/MKEvent.js.map +1 -1
- package/dist/lib-esm/MKPlayer.d.ts +3 -0
- package/dist/lib-esm/MKPlayer.js +49 -20
- package/dist/lib-esm/MKPlayer.js.map +1 -1
- package/dist/lib-esm/MKPlayerConfiguration.d.ts +3 -0
- package/dist/lib-esm/events/MKEvent.d.ts +4 -1
- package/dist/lib-esm/events/MKEvent.js +3 -0
- package/dist/lib-esm/events/MKEvent.js.map +1 -1
- package/dist/mkplayer.js +1 -1
- package/doc/assets/js/search.json +1 -1
- package/doc/classes/mkplayer.html +100 -14
- package/doc/enums/mkevent.html +52 -10
- package/doc/index.html +22 -10
- package/doc/interfaces/mkplayerconfiguration.html +57 -0
- package/index.html +83 -26
- package/mkplayer-ui.js +12052 -0
- package/multi-camera.html +391 -0
- package/package.json +3 -3
- package/src/MKPlayer.ts +65 -24
- package/src/MKPlayerConfiguration.ts +15 -0
- package/src/events/MKEvent.ts +3 -0
- package/mkplayer.zip +0 -0
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang='en'>
|
|
3
|
+
<head>
|
|
4
|
+
<title>MKPlayer 1.0.12</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 rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm'
|
|
9
|
+
crossorigin='anonymous'>
|
|
10
|
+
<script
|
|
11
|
+
src='https://code.jquery.com/jquery-3.4.1.min.js'
|
|
12
|
+
integrity='sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo='
|
|
13
|
+
crossorigin='anonymous'></script>
|
|
14
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
|
|
15
|
+
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl'
|
|
16
|
+
crossorigin='anonymous'></script>
|
|
17
|
+
<script type='text/javascript' src='./dist/mkplayer.js'></script>
|
|
18
|
+
<link rel='stylesheet' href='mkplayer-ui.min.css'>
|
|
19
|
+
<style>
|
|
20
|
+
.player-wrapper {
|
|
21
|
+
margin: 20px auto;
|
|
22
|
+
box-shadow: 0 0 30px rgba(0, 0, 0, 1);
|
|
23
|
+
min-width: 1100px;
|
|
24
|
+
min-height: 624px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.player-wrapper1 {
|
|
28
|
+
margin: 20px auto;
|
|
29
|
+
box-shadow: 0 0 30px rgba(0, 0, 0, 1);
|
|
30
|
+
min-width: 260px;
|
|
31
|
+
min-height: 160px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.player-wrapper2 {
|
|
35
|
+
margin: 20px auto;
|
|
36
|
+
box-shadow: 0 0 30px rgba(0, 0, 0, 1);
|
|
37
|
+
min-width: 260px;
|
|
38
|
+
min-height: 160px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.player-wrapper3 {
|
|
42
|
+
margin: 20px auto;
|
|
43
|
+
box-shadow: 0 0 30px rgba(0, 0, 0, 1);
|
|
44
|
+
min-width: 260px;
|
|
45
|
+
min-height: 160px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.time {
|
|
49
|
+
text-align: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.instructions {
|
|
53
|
+
text-align: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.meta-info {
|
|
57
|
+
text-align: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.row {
|
|
61
|
+
margin: 20px 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.content-selection {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-wrap: wrap;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
align-items: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.content-selection > label {
|
|
73
|
+
margin: 5px;
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
76
|
+
</head>
|
|
77
|
+
<body>
|
|
78
|
+
<div class='container'>
|
|
79
|
+
<div class='meta-info'>
|
|
80
|
+
<div class='row'>
|
|
81
|
+
<div class='col'>
|
|
82
|
+
<p class="instructions">Select the synchronized video players below to toggle the audio & swap which stream is in the primary view</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class='content'>
|
|
87
|
+
<div class='player-wrapper' id='player-wrapper'>
|
|
88
|
+
<div id='testPlayer'></div>
|
|
89
|
+
</div>
|
|
90
|
+
<div class='row'>
|
|
91
|
+
<div class='player-wrapper1' id="player-wrapper1">
|
|
92
|
+
<div id='testPlayer1'></div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class='player-wrapper2' id="player-wrapper2">
|
|
95
|
+
<div id='testPlayer2'></div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class='player-wrapper3' id="player-wrapper3">
|
|
98
|
+
<div id='testPlayer3'></div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div class='row'>
|
|
102
|
+
<div class='col-4 time'>
|
|
103
|
+
<p id="time1">Current Time: n/a</p>
|
|
104
|
+
</div>
|
|
105
|
+
<div class='col-4 time'>
|
|
106
|
+
<p id="time2">Current Time: n/a</p>
|
|
107
|
+
</div>
|
|
108
|
+
<div class='col-4 time'>
|
|
109
|
+
<p id="time3">Current Time: n/a</p>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class='row'>
|
|
113
|
+
<div class='col-4'>
|
|
114
|
+
<div class='content-selection btn-group btn-group-toggle' data-toggle='buttons'>
|
|
115
|
+
<label class='btn btn-outline-secondary'>
|
|
116
|
+
<input type='radio' name='options' id='option-latency3' autocomplete='off'>3 sec
|
|
117
|
+
</label>
|
|
118
|
+
<label class='btn btn-outline-secondary'>
|
|
119
|
+
<input type='radio' name='options' id='option-latency6' autocomplete='off'>6 sec
|
|
120
|
+
</label>
|
|
121
|
+
<label class='btn btn-outline-secondary'>
|
|
122
|
+
<input type='radio' name='options' id='option-latency8' autocomplete='off'>8 sec
|
|
123
|
+
</label>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class='col-4'>
|
|
127
|
+
<div class='content-selection btn-group btn-group-toggle' data-toggle='buttons'>
|
|
128
|
+
<label class='btn btn-outline-secondary'>
|
|
129
|
+
<input type='radio' name='options' id='option-latency3-2' autocomplete='off'>3 sec
|
|
130
|
+
</label>
|
|
131
|
+
<label class='btn btn-outline-secondary'>
|
|
132
|
+
<input type='radio' name='options' id='option-latency6-2' autocomplete='off'>6 sec
|
|
133
|
+
</label>
|
|
134
|
+
<label class='btn btn-outline-secondary'>
|
|
135
|
+
<input type='radio' name='options' id='option-latency8-2' autocomplete='off'>8 sec
|
|
136
|
+
</label>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
<div class='col-4'>
|
|
140
|
+
<div class='content-selection btn-group btn-group-toggle' data-toggle='buttons'>
|
|
141
|
+
<label class='btn btn-outline-secondary'>
|
|
142
|
+
<input type='radio' name='options' id='option-latency3-3' autocomplete='off'>3 sec
|
|
143
|
+
</label>
|
|
144
|
+
<label class='btn btn-outline-secondary'>
|
|
145
|
+
<input type='radio' name='options' id='option-latency6-3' autocomplete='off'>6 sec
|
|
146
|
+
</label>
|
|
147
|
+
<label class='btn btn-outline-secondary'>
|
|
148
|
+
<input type='radio' name='options' id='option-latency8-3' autocomplete='off'>8 sec
|
|
149
|
+
</label>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
<script type='text/javascript'>
|
|
157
|
+
let mkPlayer1;
|
|
158
|
+
let mkPlayer2;
|
|
159
|
+
let mkPlayer3;
|
|
160
|
+
|
|
161
|
+
let activeWrapper;
|
|
162
|
+
let activeSlot;
|
|
163
|
+
|
|
164
|
+
let slot1 = $("#testPlayer1")
|
|
165
|
+
let slot2 = $("#testPlayer2")
|
|
166
|
+
let slot3 = $("#testPlayer3")
|
|
167
|
+
let latency3Button = $('#option-latency3').parent();
|
|
168
|
+
let latency6Button = $('#option-latency6').parent();
|
|
169
|
+
let latency8Button = $('#option-latency8').parent();
|
|
170
|
+
|
|
171
|
+
let latency3Button2 = $('#option-latency3-2').parent();
|
|
172
|
+
let latency6Button2 = $('#option-latency6-2').parent();
|
|
173
|
+
let latency8Button2 = $('#option-latency8-2').parent();
|
|
174
|
+
|
|
175
|
+
let latency3Button3 = $('#option-latency3-3').parent();
|
|
176
|
+
let latency6Button3 = $('#option-latency6-3').parent();
|
|
177
|
+
let latency8Button3 = $('#option-latency8-3').parent();
|
|
178
|
+
|
|
179
|
+
// var mp4Source = {
|
|
180
|
+
// primaryUrl: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
|
|
181
|
+
// assetIdentifier: 'MP4 Source 1',
|
|
182
|
+
// }
|
|
183
|
+
//
|
|
184
|
+
// var mp4Source2 = {
|
|
185
|
+
// primaryUrl: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s-fmp4/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
|
|
186
|
+
// assetIdentifier: 'MP4 Source 2',
|
|
187
|
+
// }
|
|
188
|
+
//
|
|
189
|
+
// var mp4Source3 = {
|
|
190
|
+
// primaryUrl: "https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd",
|
|
191
|
+
// assetIdentifier: 'MP4 Source 3',
|
|
192
|
+
// }
|
|
193
|
+
|
|
194
|
+
let linearSource = {
|
|
195
|
+
primaryUrl: "https://akamaibroadcasteruseast.akamaized.net/cmaf/live/657078/akasource/out.mpd",
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
let mkPlayerConfiguration = {
|
|
199
|
+
debug: true,
|
|
200
|
+
autoplay: true,
|
|
201
|
+
muted: true,
|
|
202
|
+
smallScreen: false,
|
|
203
|
+
ui: false,
|
|
204
|
+
targetLatency: 6,
|
|
205
|
+
key: '91c1e62d-1547-464b-a73c-4701fc5dea24'
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
let playerContainer1 = document.getElementById('testPlayer1');
|
|
209
|
+
mkPlayer1 = new mkplayer.MKPlayer(playerContainer1, mkPlayerConfiguration);
|
|
210
|
+
let playerContainer2 = document.getElementById('testPlayer2');
|
|
211
|
+
mkPlayer2 = new mkplayer.MKPlayer(playerContainer2, mkPlayerConfiguration);
|
|
212
|
+
let playerContainer3 = document.getElementById('testPlayer3');
|
|
213
|
+
mkPlayer3 = new mkplayer.MKPlayer(playerContainer3, mkPlayerConfiguration);
|
|
214
|
+
|
|
215
|
+
mkPlayer1.load(linearSource);
|
|
216
|
+
mkPlayer2.load(linearSource);
|
|
217
|
+
|
|
218
|
+
setTimeout(() => {
|
|
219
|
+
mkPlayer3.load(linearSource);
|
|
220
|
+
}, 1000)
|
|
221
|
+
|
|
222
|
+
let speed1 = 'unknown'
|
|
223
|
+
let speed2 = 'unknown'
|
|
224
|
+
let speed3 = 'unknown'
|
|
225
|
+
|
|
226
|
+
latency3Button.on('click', function() {
|
|
227
|
+
console.log('Setting Latency to 3')
|
|
228
|
+
mkPlayer1.setTargetLatency(3)
|
|
229
|
+
});
|
|
230
|
+
|
|
231
|
+
latency8Button.on('click', function() {
|
|
232
|
+
console.log('Setting Latency to 8')
|
|
233
|
+
mkPlayer1.setTargetLatency(8)
|
|
234
|
+
});
|
|
235
|
+
|
|
236
|
+
latency6Button.on('click', function() {
|
|
237
|
+
console.log('Setting Latency to 6')
|
|
238
|
+
mkPlayer1.setTargetLatency(6)
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
latency3Button2.on('click', function() {
|
|
242
|
+
console.log('Setting Latency to 3')
|
|
243
|
+
mkPlayer2.setTargetLatency(3)
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
latency8Button2.on('click', function() {
|
|
247
|
+
console.log('Setting Latency to 8')
|
|
248
|
+
mkPlayer2.setTargetLatency(8)
|
|
249
|
+
});
|
|
250
|
+
|
|
251
|
+
latency6Button2.on('click', function() {
|
|
252
|
+
console.log('Setting Latency to 6')
|
|
253
|
+
mkPlayer2.setTargetLatency(6)
|
|
254
|
+
});
|
|
255
|
+
|
|
256
|
+
latency3Button3.on('click', function() {
|
|
257
|
+
console.log('Setting Latency to 3')
|
|
258
|
+
mkPlayer3.setTargetLatency(3)
|
|
259
|
+
});
|
|
260
|
+
|
|
261
|
+
latency8Button3.on('click', function() {
|
|
262
|
+
console.log('Setting Latency to 8')
|
|
263
|
+
mkPlayer3.setTargetLatency(8)
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
latency6Button3.on('click', function() {
|
|
267
|
+
console.log('Setting Latency to 6')
|
|
268
|
+
mkPlayer3.setTargetLatency(6)
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
mkPlayer1.on('latencymodechanged', (event) => {
|
|
272
|
+
console.log('speed1 changed')
|
|
273
|
+
speed1 = event.to;
|
|
274
|
+
})
|
|
275
|
+
|
|
276
|
+
mkPlayer2.on('latencymodechanged', (event) => {
|
|
277
|
+
console.log('speed2 changed')
|
|
278
|
+
speed2 = event.to;
|
|
279
|
+
})
|
|
280
|
+
|
|
281
|
+
mkPlayer3.on('latencymodechanged', (event) => {
|
|
282
|
+
console.log('speed3 changed')
|
|
283
|
+
speed3 = event.to;
|
|
284
|
+
})
|
|
285
|
+
|
|
286
|
+
mkPlayer1.on('timechanged', (event) => {
|
|
287
|
+
$('#time1').text('Latency: ' + mkPlayer1.getLatency());
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
mkPlayer2.on('timechanged', (event) => {
|
|
291
|
+
n = Date.now()
|
|
292
|
+
delta = (n / 1000 - event.time).toFixed(2);
|
|
293
|
+
$('#time2').text('Latency: ' + mkPlayer2.getLatency());
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
mkPlayer3.on('timechanged', (event) => {
|
|
297
|
+
n = Date.now()
|
|
298
|
+
delta = (n / 1000 - event.time).toFixed(2);
|
|
299
|
+
$('#time3').text('Latency: ' + mkPlayer3.getLatency());
|
|
300
|
+
});
|
|
301
|
+
|
|
302
|
+
$("#player-wrapper1").click(function() {
|
|
303
|
+
|
|
304
|
+
$("#player-wrapper2").css({ boxShadow: '0px 0px 30px #000000' })
|
|
305
|
+
$("#player-wrapper3").css({ boxShadow: '0px 0px 30px #000000' })
|
|
306
|
+
$(this).css({ boxShadow: '0px 0px 30px #FF0000' })
|
|
307
|
+
|
|
308
|
+
if (activeWrapper && activeWrapper.attr('id') === $("#player-wrapper1").attr('id')) {
|
|
309
|
+
console.log('Sending Player 1 back to home')
|
|
310
|
+
if (activeWrapper) {
|
|
311
|
+
activeWrapper.append(activeSlot);
|
|
312
|
+
}
|
|
313
|
+
activeWrapper = null;
|
|
314
|
+
activeSlot = null;
|
|
315
|
+
} else {
|
|
316
|
+
console.log('Sending Player 1 to Active')
|
|
317
|
+
if (activeWrapper) {
|
|
318
|
+
activeWrapper.append(activeSlot);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
$("#player-wrapper").append(slot1);
|
|
322
|
+
|
|
323
|
+
activeWrapper = $("#player-wrapper1");
|
|
324
|
+
activeSlot = slot1
|
|
325
|
+
|
|
326
|
+
mkPlayer1.unmute()
|
|
327
|
+
mkPlayer2.mute()
|
|
328
|
+
mkPlayer3.mute()
|
|
329
|
+
}
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
$("#player-wrapper2").click(function() {
|
|
333
|
+
$("#player-wrapper1").css({ boxShadow: '0px 0px 30px #000000' })
|
|
334
|
+
$("#player-wrapper3").css({ boxShadow: '0px 0px 30px #000000' })
|
|
335
|
+
$(this).css({ boxShadow: '0px 0px 30px #FF0000' })
|
|
336
|
+
|
|
337
|
+
if (activeWrapper && activeWrapper.attr('id') === $("#player-wrapper2").attr('id')) {
|
|
338
|
+
console.log('Sending Player 2 back to home')
|
|
339
|
+
if (activeWrapper) {
|
|
340
|
+
activeWrapper.append(activeSlot);
|
|
341
|
+
}
|
|
342
|
+
activeWrapper = null;
|
|
343
|
+
activeSlot = null;
|
|
344
|
+
} else {
|
|
345
|
+
console.log('Sending Player 2 to Active')
|
|
346
|
+
if (activeWrapper) {
|
|
347
|
+
activeWrapper.append(activeSlot);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
$("#player-wrapper").append(slot2);
|
|
351
|
+
|
|
352
|
+
activeWrapper = $("#player-wrapper2");
|
|
353
|
+
activeSlot = slot2
|
|
354
|
+
|
|
355
|
+
mkPlayer1.mute()
|
|
356
|
+
mkPlayer2.unmute()
|
|
357
|
+
mkPlayer3.mute()
|
|
358
|
+
}
|
|
359
|
+
});
|
|
360
|
+
|
|
361
|
+
$("#player-wrapper3").click(function() {
|
|
362
|
+
$("#player-wrapper1").css({ boxShadow: '0px 0px 30px #000000' })
|
|
363
|
+
$("#player-wrapper2").css({ boxShadow: '0px 0px 30px #000000' })
|
|
364
|
+
$(this).css({ boxShadow: '0px 0px 30px #FF0000' })
|
|
365
|
+
|
|
366
|
+
if (activeWrapper && activeWrapper.attr('id') === $("#player-wrapper3").attr('id')) {
|
|
367
|
+
console.log('Sending Player 3 back to home')
|
|
368
|
+
if (activeWrapper) {
|
|
369
|
+
activeWrapper.append(activeSlot);
|
|
370
|
+
}
|
|
371
|
+
activeWrapper = null;
|
|
372
|
+
activeSlot = null;
|
|
373
|
+
} else {
|
|
374
|
+
console.log('Sending Player 3 to Active')
|
|
375
|
+
if (activeWrapper) {
|
|
376
|
+
activeWrapper.append(activeSlot);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
$("#player-wrapper").append(slot3);
|
|
380
|
+
|
|
381
|
+
activeWrapper = $("#player-wrapper3");
|
|
382
|
+
activeSlot = slot3
|
|
383
|
+
|
|
384
|
+
mkPlayer1.mute()
|
|
385
|
+
mkPlayer2.mute()
|
|
386
|
+
mkPlayer3.unmute()
|
|
387
|
+
}
|
|
388
|
+
});
|
|
389
|
+
</script>
|
|
390
|
+
</body>
|
|
391
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mediakind/mkplayer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "MediaKind Web Player",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -23,12 +23,12 @@
|
|
|
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'"
|
|
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' && azcopy copy mkplayer-ui.js '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
|
-
"bitmovin-player": "8.
|
|
31
|
+
"bitmovin-player": "8.49.0",
|
|
32
32
|
"bitmovin-player-ui": "3.17.0",
|
|
33
33
|
"fast-safe-stringify": "^2.0.7"
|
|
34
34
|
},
|
package/src/MKPlayer.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
BufferType,
|
|
3
|
-
SubtitleTrack,
|
|
2
|
+
BufferType, LogLevel, MediaType, Player, PlayerAPI, PlayerConfig, PlayerEvent, SourceConfig, SubtitleTrack,
|
|
4
3
|
} from 'bitmovin-player';
|
|
5
4
|
import { UIFactory } from 'bitmovin-player-ui';
|
|
6
5
|
import { MKPlayerConfiguration } from './MKPlayerConfiguration';
|
|
@@ -24,7 +23,7 @@ export class MKPlayer {
|
|
|
24
23
|
*/
|
|
25
24
|
constructor(containerElement: HTMLElement, mkPlayerConfiguration: MKPlayerConfiguration) {
|
|
26
25
|
let playerConfig: PlayerConfig = {
|
|
27
|
-
key:
|
|
26
|
+
key: mkPlayerConfiguration.key,
|
|
28
27
|
playback: {
|
|
29
28
|
autoplay: mkPlayerConfiguration.autoplay,
|
|
30
29
|
muted: mkPlayerConfiguration.muted,
|
|
@@ -33,41 +32,51 @@ export class MKPlayer {
|
|
|
33
32
|
key: '1c45ae9c-345e-4462-95e2-3e8faccd64f1',
|
|
34
33
|
},
|
|
35
34
|
location: {
|
|
36
|
-
ui: '
|
|
35
|
+
ui: 'mkplayer-ui.js',
|
|
37
36
|
ui_css: 'mkplayer-ui.min.css',
|
|
38
37
|
},
|
|
39
38
|
logs: {
|
|
40
39
|
level: LogLevel.OFF,
|
|
41
40
|
bitmovin: false,
|
|
42
41
|
},
|
|
43
|
-
network: {
|
|
44
|
-
preprocessHttpResponse: function(type, response) {
|
|
45
|
-
if (type === HttpRequestType.MANIFEST_HLS_VARIANT) {
|
|
46
|
-
// @ts-ignore
|
|
47
|
-
response.body = (response.body as string).replace('TIME-OFFSET=0',
|
|
48
|
-
'TIME-OFFSET=0,PRECISE="YES"');
|
|
49
|
-
} else if (type === HttpRequestType.MANIFEST_HLS_MASTER) {
|
|
50
|
-
// @ts-ignore
|
|
51
|
-
response.body = (response.body as string).replace(',wvtt"',
|
|
52
|
-
'"');
|
|
53
|
-
}
|
|
54
|
-
return Promise.resolve(response);
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
42
|
};
|
|
58
43
|
|
|
59
|
-
|
|
44
|
+
if (mkPlayerConfiguration.ui === false) {
|
|
45
|
+
playerConfig.ui = false;
|
|
46
|
+
}
|
|
60
47
|
|
|
61
|
-
if (mkPlayerConfiguration.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
48
|
+
if (mkPlayerConfiguration.targetLatency > 0) {
|
|
49
|
+
playerConfig.live = {
|
|
50
|
+
lowLatency: {
|
|
51
|
+
targetLatency: mkPlayerConfiguration.targetLatency,
|
|
52
|
+
catchup: {
|
|
53
|
+
playbackRateThreshold: 0.075,
|
|
54
|
+
seekThreshold: 12,
|
|
55
|
+
playbackRate: 1.2,
|
|
56
|
+
},
|
|
57
|
+
fallback: {
|
|
58
|
+
playbackRateThreshold: 0.075,
|
|
59
|
+
seekThreshold: 12,
|
|
60
|
+
playbackRate: 0.8,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
let player = new Player(containerElement, playerConfig);
|
|
67
|
+
if (mkPlayerConfiguration.ui !== false) {
|
|
68
|
+
if (mkPlayerConfiguration.smallScreen) {
|
|
69
|
+
UIFactory.buildDefaultSmallScreenUI(player);
|
|
70
|
+
} else {
|
|
71
|
+
UIFactory.buildDefaultUI(player);
|
|
72
|
+
}
|
|
65
73
|
}
|
|
66
74
|
|
|
67
75
|
if (mkPlayerConfiguration.debug) {
|
|
68
76
|
Logger.enable();
|
|
69
77
|
}
|
|
70
78
|
|
|
79
|
+
|
|
71
80
|
this.player = player;
|
|
72
81
|
|
|
73
82
|
console.log('%c MKPlayer ' + this.version() + ' www.mediakind.com', 'color: blue');
|
|
@@ -190,6 +199,22 @@ export class MKPlayer {
|
|
|
190
199
|
};
|
|
191
200
|
}
|
|
192
201
|
|
|
202
|
+
/**
|
|
203
|
+
* sets the target latency during live playback
|
|
204
|
+
* @param latency
|
|
205
|
+
*/
|
|
206
|
+
setTargetLatency(latency: number) {
|
|
207
|
+
this.player.lowlatency.setTargetLatency(latency);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/**
|
|
211
|
+
* sets the target latency during live playback
|
|
212
|
+
* @param latency
|
|
213
|
+
*/
|
|
214
|
+
getLatency(): number {
|
|
215
|
+
return this.player.lowlatency.getLatency();
|
|
216
|
+
}
|
|
217
|
+
|
|
193
218
|
/**
|
|
194
219
|
* mutes the player
|
|
195
220
|
*/
|
|
@@ -197,6 +222,13 @@ export class MKPlayer {
|
|
|
197
222
|
this.player.mute();
|
|
198
223
|
}
|
|
199
224
|
|
|
225
|
+
/**
|
|
226
|
+
* gets the current playback speed
|
|
227
|
+
*/
|
|
228
|
+
playbackSpeed(): number {
|
|
229
|
+
return this.player.getPlaybackSpeed();
|
|
230
|
+
}
|
|
231
|
+
|
|
200
232
|
/**
|
|
201
233
|
* unmute the player
|
|
202
234
|
*/
|
|
@@ -218,7 +250,7 @@ export class MKPlayer {
|
|
|
218
250
|
* returns the current player version
|
|
219
251
|
*/
|
|
220
252
|
version(): string {
|
|
221
|
-
return '1.0.
|
|
253
|
+
return '1.0.12';
|
|
222
254
|
}
|
|
223
255
|
|
|
224
256
|
private static selectUrl(source: MKStream): string {
|
|
@@ -258,6 +290,9 @@ export class MKPlayer {
|
|
|
258
290
|
case MKEvent.Playing:
|
|
259
291
|
playerEventType = PlayerEvent.Playing;
|
|
260
292
|
break;
|
|
293
|
+
case MKEvent.Paused:
|
|
294
|
+
playerEventType = PlayerEvent.Paused;
|
|
295
|
+
break;
|
|
261
296
|
case MKEvent.TimeChanged:
|
|
262
297
|
playerEventType = PlayerEvent.TimeChanged;
|
|
263
298
|
break;
|
|
@@ -282,6 +317,12 @@ export class MKPlayer {
|
|
|
282
317
|
case MKEvent.Unloaded:
|
|
283
318
|
playerEventType = PlayerEvent.SourceUnloaded;
|
|
284
319
|
break;
|
|
320
|
+
case MKEvent.Metadata:
|
|
321
|
+
playerEventType = PlayerEvent.Metadata;
|
|
322
|
+
break;
|
|
323
|
+
case MKEvent.MetadataParsed:
|
|
324
|
+
playerEventType = PlayerEvent.MetadataParsed;
|
|
325
|
+
break;
|
|
285
326
|
}
|
|
286
327
|
|
|
287
328
|
return playerEventType;
|
|
@@ -21,4 +21,19 @@ export interface MKPlayerConfiguration {
|
|
|
21
21
|
* Boolean indicating if the player should load the small screen ui
|
|
22
22
|
*/
|
|
23
23
|
smallScreen: boolean;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Boolean to enable / disable ui
|
|
27
|
+
*/
|
|
28
|
+
ui: boolean;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* number of seconds the player attempts to stay behind the live point
|
|
32
|
+
*/
|
|
33
|
+
targetLatency: number;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* license key for the video player
|
|
37
|
+
*/
|
|
38
|
+
key: string;
|
|
24
39
|
}
|
package/src/events/MKEvent.ts
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export enum MKEvent {
|
|
5
5
|
Playing = 'playing',
|
|
6
|
+
Paused = 'paused',
|
|
6
7
|
Ready = 'ready',
|
|
7
8
|
TimeChanged = 'timechanged',
|
|
8
9
|
Error = 'error',
|
|
@@ -13,4 +14,6 @@ export enum MKEvent {
|
|
|
13
14
|
QualityChanged = 'qualitychanged',
|
|
14
15
|
SegmentPlayback = 'segmentplayback',
|
|
15
16
|
Unloaded = 'unloaded',
|
|
17
|
+
MetadataParsed = 'metadataparsed',
|
|
18
|
+
Metadata = 'metadata',
|
|
16
19
|
}
|
package/mkplayer.zip
DELETED
|
Binary file
|