@mediakind/mkplayer 1.0.9 → 1.0.11
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 +8 -0
- package/dist/MKPlayer.d.ts +3 -0
- package/dist/MKPlayerConfiguration.d.ts +3 -0
- package/dist/events/MKEvent.d.ts +3 -1
- package/dist/index.d.ts +2 -0
- package/dist/lib/MKPlayer.d.ts +3 -0
- package/dist/lib/MKPlayer.js +44 -7
- package/dist/lib/MKPlayer.js.map +1 -1
- package/dist/lib/MKPlayerConfiguration.d.ts +3 -0
- package/dist/lib/events/MKEvent.d.ts +3 -1
- package/dist/lib/events/MKEvent.js +2 -0
- package/dist/lib/events/MKEvent.js.map +1 -1
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib-esm/MKPlayer.d.ts +3 -0
- package/dist/lib-esm/MKPlayer.js +44 -7
- 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 +3 -1
- package/dist/lib-esm/events/MKEvent.js +2 -0
- package/dist/lib-esm/events/MKEvent.js.map +1 -1
- package/dist/lib-esm/index.d.ts +2 -0
- 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 +28 -0
- package/doc/index.html +9 -1
- package/doc/interfaces/mkplayerconfiguration.html +57 -0
- package/index.html +63 -24
- package/multi-camera.html +391 -0
- package/package.json +3 -3
- package/src/MKPlayer.ts +60 -7
- package/src/MKPlayerConfiguration.ts +15 -0
- package/src/events/MKEvent.ts +2 -0
- package/src/index.ts +3 -1
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.11</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'>
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
<input type='radio' name='options' id='option-hls-subtitle' autocomplete='off'>HLS Subtitle
|
|
99
99
|
</label>
|
|
100
100
|
<label class='btn btn-outline-secondary'>
|
|
101
|
-
<input type='radio' name='options' id='option-
|
|
101
|
+
<input type='radio' name='options' id='option-emsg-1' autocomplete='off'>EMSG Live
|
|
102
102
|
</label>
|
|
103
103
|
<label class='btn btn-outline-secondary'>
|
|
104
104
|
<input type='radio' name='options' id='option-mp4-2' autocomplete='off'>MP4 Source 2
|
|
@@ -151,6 +151,16 @@
|
|
|
151
151
|
<p id='playbackBitrate'>Video Playback Bitrate: unknown</p>
|
|
152
152
|
</div>
|
|
153
153
|
</div>
|
|
154
|
+
<div class='row'>
|
|
155
|
+
<div class='col-12'>
|
|
156
|
+
<p id='wallClockTime'>Wall Clock Time: unknown</p>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class='row'>
|
|
160
|
+
<div class='col-12'>
|
|
161
|
+
<p id='segmentTime'>Segment Time: unknown</p>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
154
164
|
<div class='row'>
|
|
155
165
|
<div class='col-12'>
|
|
156
166
|
<p id='segmentPlaybackLabel'>Segment: unknown</p>
|
|
@@ -158,12 +168,11 @@
|
|
|
158
168
|
</div>
|
|
159
169
|
</div>
|
|
160
170
|
<script type='text/javascript'>
|
|
161
|
-
let mkPlayer;
|
|
162
171
|
let vodButton = $('#option-vod').parent();
|
|
163
172
|
let dashVodButton = $('#option-dash-vod').parent();
|
|
164
173
|
let dashSubtitleButton = $('#option-dash-subtitle').parent();
|
|
165
174
|
let hlsSubtitleButton = $('#option-hls-subtitle').parent();
|
|
166
|
-
let
|
|
175
|
+
let emsgButton = $('#option-emsg-1').parent();
|
|
167
176
|
let mp4Button2 = $('#option-mp4-2').parent();
|
|
168
177
|
let mp4Button3 = $('#option-mp4-3').parent();
|
|
169
178
|
let liveButton = $('#option-live').parent();
|
|
@@ -189,6 +198,19 @@
|
|
|
189
198
|
});
|
|
190
199
|
}
|
|
191
200
|
|
|
201
|
+
function formatTimestamp(timestamp) {
|
|
202
|
+
var date = new Date(timestamp * 1000);
|
|
203
|
+
var hours = date.getHours();
|
|
204
|
+
var minutes = "0" + date.getMinutes();
|
|
205
|
+
var seconds = "0" + date.getSeconds();
|
|
206
|
+
var millis = "0" + date.getMilliseconds();
|
|
207
|
+
|
|
208
|
+
var formattedTime = date.toDateString() + ' ' + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2) + ':' + millis.substr(-3);
|
|
209
|
+
|
|
210
|
+
return formattedTime;
|
|
211
|
+
|
|
212
|
+
}
|
|
213
|
+
|
|
192
214
|
vodButton.on('click', function() {
|
|
193
215
|
vodButton.button('toggle');
|
|
194
216
|
deselectCustomLoadButton();
|
|
@@ -224,10 +246,10 @@
|
|
|
224
246
|
load(errorSource);
|
|
225
247
|
});
|
|
226
248
|
|
|
227
|
-
|
|
228
|
-
|
|
249
|
+
emsgButton.on('click', function() {
|
|
250
|
+
emsgButton.button('toggle');
|
|
229
251
|
deselectCustomLoadButton();
|
|
230
|
-
load(
|
|
252
|
+
load(emsgSource);
|
|
231
253
|
});
|
|
232
254
|
|
|
233
255
|
mp4Button2.on('click', function() {
|
|
@@ -260,7 +282,7 @@
|
|
|
260
282
|
assetIdentifier: 'Custom Source',
|
|
261
283
|
};
|
|
262
284
|
|
|
263
|
-
if($('#subtitle-url').val() && $('#subtitle-language').val()) {
|
|
285
|
+
if ($('#subtitle-url').val() && $('#subtitle-language').val()) {
|
|
264
286
|
customSource.subtitleTracks = [{
|
|
265
287
|
url: $('#subtitle-url').val(),
|
|
266
288
|
language: $('#subtitle-language').val(),
|
|
@@ -272,7 +294,6 @@
|
|
|
272
294
|
});
|
|
273
295
|
|
|
274
296
|
unloadStream.on('click', function() {
|
|
275
|
-
|
|
276
297
|
$($('.btn-group-toggle .active')[0]).removeClass('active');
|
|
277
298
|
|
|
278
299
|
// remove active button of group
|
|
@@ -280,11 +301,17 @@
|
|
|
280
301
|
});
|
|
281
302
|
|
|
282
303
|
let liveSource = {
|
|
283
|
-
primaryUrl: "https://
|
|
304
|
+
primaryUrl: "https://cesopenlive-mediakind.akamaized.net/cmaf/CES-Hero-ASL/index.m3u8",
|
|
284
305
|
cdnFailoverPercent: 10,
|
|
285
306
|
assetIdentifier: 'DASH Live',
|
|
286
307
|
};
|
|
287
308
|
|
|
309
|
+
let emsgSource = {
|
|
310
|
+
primaryUrl: "https://livesim.dashif.org/livesim/scte35_2/testpic_2s/Manifest.mpd",
|
|
311
|
+
cdnFailoverPercent: 0,
|
|
312
|
+
assetIdentifier: 'EMSG Live',
|
|
313
|
+
};
|
|
314
|
+
|
|
288
315
|
let dashSubtitleSource = {
|
|
289
316
|
primaryUrl: "https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd",
|
|
290
317
|
subtitleTracks: [{
|
|
@@ -292,7 +319,7 @@
|
|
|
292
319
|
language: 'aa',
|
|
293
320
|
}],
|
|
294
321
|
assetIdentifier: 'DASH Subtitle',
|
|
295
|
-
poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png'
|
|
322
|
+
poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
|
|
296
323
|
};
|
|
297
324
|
|
|
298
325
|
let dashVodSource = {
|
|
@@ -308,7 +335,7 @@
|
|
|
308
335
|
let hlsSubtitleSource = {
|
|
309
336
|
primaryUrl: 'https://mk-orionsedge.azureedge.net/test/hls/tos/index.m3u8',
|
|
310
337
|
cdnFailoverPercent: 0,
|
|
311
|
-
assetIdentifier: 'HLS Subtitle'
|
|
338
|
+
assetIdentifier: 'HLS Subtitle',
|
|
312
339
|
}
|
|
313
340
|
|
|
314
341
|
var vodSource = {
|
|
@@ -342,7 +369,7 @@
|
|
|
342
369
|
{
|
|
343
370
|
url: 'https://mediusprodstatic.studios.ms/video-28731/Caption_ar-EG.vtt?sv=2018-03-28&sr=c&sig=qFHd87nMFTZWXNkDIEcq4656fFH6Zb%2Fd40q4zaVSOJA%3D&se=2025-05-26T15%3A52%3A20Z&sp=r',
|
|
344
371
|
language: 'ms',
|
|
345
|
-
}
|
|
372
|
+
},
|
|
346
373
|
],
|
|
347
374
|
}
|
|
348
375
|
|
|
@@ -357,10 +384,11 @@
|
|
|
357
384
|
autoplay: true,
|
|
358
385
|
muted: true,
|
|
359
386
|
smallScreen: false,
|
|
387
|
+
key: '84dc4716-55f9-43fa-ae8e-6fa334c5189b'
|
|
360
388
|
};
|
|
361
389
|
|
|
362
390
|
let playerContainer = document.getElementById('testPlayer');
|
|
363
|
-
mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
|
|
391
|
+
let mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
|
|
364
392
|
|
|
365
393
|
mkPlayer.on('error', function(event) {
|
|
366
394
|
console.error('[MKPlayer] error: %d - %s', event.code, event.name);
|
|
@@ -374,14 +402,25 @@
|
|
|
374
402
|
console.info('[MKPlayer] ready ' + event.timestamp);
|
|
375
403
|
})
|
|
376
404
|
|
|
405
|
+
const getAudioBufferLevel = function() {
|
|
406
|
+
return mkPlayer.getBufferLevels().audio
|
|
407
|
+
};
|
|
408
|
+
const getVideoBufferLevel = function() {
|
|
409
|
+
return mkPlayer.getBufferLevels().video
|
|
410
|
+
};
|
|
377
411
|
mkPlayer.on('timechanged', function(event) {
|
|
378
|
-
|
|
412
|
+
let videoBufferLevel = Math.round(getVideoBufferLevel() * 100) / 100;
|
|
379
413
|
$('#videoBuffer').css('width', videoBufferLevel + '%').attr('aria-valuenow', videoBufferLevel);
|
|
380
414
|
$('#videoBuffer').text(videoBufferLevel)
|
|
381
415
|
|
|
382
|
-
|
|
416
|
+
let audioBufferLevel = Math.round(getAudioBufferLevel() * 100) / 100;
|
|
383
417
|
$('#audioBuffer').css('width', audioBufferLevel + '%').attr('aria-valuenow', audioBufferLevel);
|
|
384
418
|
$('#audioBuffer').text(audioBufferLevel)
|
|
419
|
+
|
|
420
|
+
$('#segmentTime').text('Segment Time: ' + formatTimestamp(event.time))
|
|
421
|
+
|
|
422
|
+
$('#wallClockTime').text('Wall Clock Time: ' + formatTimestamp(Date.now()/1000))
|
|
423
|
+
|
|
385
424
|
})
|
|
386
425
|
|
|
387
426
|
mkPlayer.on('playing', function(event) {
|
|
@@ -404,8 +443,8 @@
|
|
|
404
443
|
if (event.mimeType === 'video/mp4') {
|
|
405
444
|
let segmentUrl = event.url
|
|
406
445
|
let fileNameIndex = segmentUrl.lastIndexOf("/") + 1;
|
|
407
|
-
|
|
408
|
-
$('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + '
|
|
446
|
+
const filename = segmentUrl.substr(fileNameIndex);
|
|
447
|
+
$('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + ' time=' + event.playbackTime)
|
|
409
448
|
previousSegmentPlaybackTime = event.playbackTime;
|
|
410
449
|
}
|
|
411
450
|
})
|
|
@@ -415,13 +454,13 @@
|
|
|
415
454
|
$('#playbackBitrate').text('Video Playback Quality: ' + currentPlayingBitrate)
|
|
416
455
|
});
|
|
417
456
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
}
|
|
457
|
+
mkPlayer.on('metadata', function(event) {
|
|
458
|
+
console.info('[MKPlayer] metadata' + JSON.stringify(event));
|
|
459
|
+
});
|
|
421
460
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
}
|
|
461
|
+
mkPlayer.on('metadataparsed', function(event) {
|
|
462
|
+
console.info('[MKPlayer] metadata parsed' + JSON.stringify(event));
|
|
463
|
+
});
|
|
425
464
|
|
|
426
465
|
load(liveSource)
|
|
427
466
|
|
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang='en'>
|
|
3
|
+
<head>
|
|
4
|
+
<title>MKPlayer 1.0.11</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.11",
|
|
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'"
|
|
27
27
|
},
|
|
28
28
|
"author": "MediaKind",
|
|
29
29
|
"license": "ISC",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"bitmovin-player": "8.
|
|
31
|
+
"bitmovin-player": "8.48.2",
|
|
32
32
|
"bitmovin-player-ui": "3.17.0",
|
|
33
33
|
"fast-safe-stringify": "^2.0.7"
|
|
34
34
|
},
|