@mediakind/mkplayer 1.0.10 → 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 +43 -6
- 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-esm/MKPlayer.d.ts +3 -0
- package/dist/lib-esm/MKPlayer.js +43 -6
- 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/mkplayer.js +1 -1
- package/doc/assets/js/search.json +1 -1
- package/doc/classes/mkplayer.html +99 -13
- package/doc/enums/mkevent.html +28 -0
- package/doc/index.html +8 -0
- package/doc/interfaces/mkplayerconfiguration.html +57 -0
- package/index.html +63 -23
- package/multi-camera.html +391 -0
- package/package.json +3 -3
- package/src/MKPlayer.ts +59 -6
- package/src/MKPlayerConfiguration.ts +15 -0
- package/src/events/MKEvent.ts +2 -0
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(),
|
|
@@ -279,11 +301,17 @@
|
|
|
279
301
|
});
|
|
280
302
|
|
|
281
303
|
let liveSource = {
|
|
282
|
-
primaryUrl: "https://
|
|
304
|
+
primaryUrl: "https://cesopenlive-mediakind.akamaized.net/cmaf/CES-Hero-ASL/index.m3u8",
|
|
283
305
|
cdnFailoverPercent: 10,
|
|
284
306
|
assetIdentifier: 'DASH Live',
|
|
285
307
|
};
|
|
286
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
|
+
|
|
287
315
|
let dashSubtitleSource = {
|
|
288
316
|
primaryUrl: "https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd",
|
|
289
317
|
subtitleTracks: [{
|
|
@@ -291,7 +319,7 @@
|
|
|
291
319
|
language: 'aa',
|
|
292
320
|
}],
|
|
293
321
|
assetIdentifier: 'DASH Subtitle',
|
|
294
|
-
poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png'
|
|
322
|
+
poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
|
|
295
323
|
};
|
|
296
324
|
|
|
297
325
|
let dashVodSource = {
|
|
@@ -307,7 +335,7 @@
|
|
|
307
335
|
let hlsSubtitleSource = {
|
|
308
336
|
primaryUrl: 'https://mk-orionsedge.azureedge.net/test/hls/tos/index.m3u8',
|
|
309
337
|
cdnFailoverPercent: 0,
|
|
310
|
-
assetIdentifier: 'HLS Subtitle'
|
|
338
|
+
assetIdentifier: 'HLS Subtitle',
|
|
311
339
|
}
|
|
312
340
|
|
|
313
341
|
var vodSource = {
|
|
@@ -341,7 +369,7 @@
|
|
|
341
369
|
{
|
|
342
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',
|
|
343
371
|
language: 'ms',
|
|
344
|
-
}
|
|
372
|
+
},
|
|
345
373
|
],
|
|
346
374
|
}
|
|
347
375
|
|
|
@@ -356,10 +384,11 @@
|
|
|
356
384
|
autoplay: true,
|
|
357
385
|
muted: true,
|
|
358
386
|
smallScreen: false,
|
|
387
|
+
key: '84dc4716-55f9-43fa-ae8e-6fa334c5189b'
|
|
359
388
|
};
|
|
360
389
|
|
|
361
390
|
let playerContainer = document.getElementById('testPlayer');
|
|
362
|
-
mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
|
|
391
|
+
let mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
|
|
363
392
|
|
|
364
393
|
mkPlayer.on('error', function(event) {
|
|
365
394
|
console.error('[MKPlayer] error: %d - %s', event.code, event.name);
|
|
@@ -373,14 +402,25 @@
|
|
|
373
402
|
console.info('[MKPlayer] ready ' + event.timestamp);
|
|
374
403
|
})
|
|
375
404
|
|
|
405
|
+
const getAudioBufferLevel = function() {
|
|
406
|
+
return mkPlayer.getBufferLevels().audio
|
|
407
|
+
};
|
|
408
|
+
const getVideoBufferLevel = function() {
|
|
409
|
+
return mkPlayer.getBufferLevels().video
|
|
410
|
+
};
|
|
376
411
|
mkPlayer.on('timechanged', function(event) {
|
|
377
|
-
|
|
412
|
+
let videoBufferLevel = Math.round(getVideoBufferLevel() * 100) / 100;
|
|
378
413
|
$('#videoBuffer').css('width', videoBufferLevel + '%').attr('aria-valuenow', videoBufferLevel);
|
|
379
414
|
$('#videoBuffer').text(videoBufferLevel)
|
|
380
415
|
|
|
381
|
-
|
|
416
|
+
let audioBufferLevel = Math.round(getAudioBufferLevel() * 100) / 100;
|
|
382
417
|
$('#audioBuffer').css('width', audioBufferLevel + '%').attr('aria-valuenow', audioBufferLevel);
|
|
383
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
|
+
|
|
384
424
|
})
|
|
385
425
|
|
|
386
426
|
mkPlayer.on('playing', function(event) {
|
|
@@ -403,8 +443,8 @@
|
|
|
403
443
|
if (event.mimeType === 'video/mp4') {
|
|
404
444
|
let segmentUrl = event.url
|
|
405
445
|
let fileNameIndex = segmentUrl.lastIndexOf("/") + 1;
|
|
406
|
-
|
|
407
|
-
$('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + '
|
|
446
|
+
const filename = segmentUrl.substr(fileNameIndex);
|
|
447
|
+
$('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + ' time=' + event.playbackTime)
|
|
408
448
|
previousSegmentPlaybackTime = event.playbackTime;
|
|
409
449
|
}
|
|
410
450
|
})
|
|
@@ -414,13 +454,13 @@
|
|
|
414
454
|
$('#playbackBitrate').text('Video Playback Quality: ' + currentPlayingBitrate)
|
|
415
455
|
});
|
|
416
456
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
}
|
|
457
|
+
mkPlayer.on('metadata', function(event) {
|
|
458
|
+
console.info('[MKPlayer] metadata' + JSON.stringify(event));
|
|
459
|
+
});
|
|
420
460
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
}
|
|
461
|
+
mkPlayer.on('metadataparsed', function(event) {
|
|
462
|
+
console.info('[MKPlayer] metadata parsed' + JSON.stringify(event));
|
|
463
|
+
});
|
|
424
464
|
|
|
425
465
|
load(liveSource)
|
|
426
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
|
},
|