@mediakind/mkplayer 1.0.10 → 1.0.12

package/doc/interfaces/mkplayerconfiguration.html

@@ -88,8 +88,11 @@
 							<ul class="tsd-index-list">
 								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#autoplay" class="tsd-kind-icon">autoplay</a></li>
 								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#debug" class="tsd-kind-icon">debug</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#key" class="tsd-kind-icon">key</a></li>
 								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#muted" class="tsd-kind-icon">muted</a></li>
 								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#smallscreen" class="tsd-kind-icon">small<wbr>Screen</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#targetlatency" class="tsd-kind-icon">target<wbr>Latency</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="mkplayerconfiguration.html#ui" class="tsd-kind-icon">ui</a></li>
 							</ul>
 						</section>
 					</div>
@@ -127,6 +130,21 @@
 						</div>
 					</div>
 				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="key" class="tsd-anchor"></a>
+					<h3>key</h3>
+					<div class="tsd-signature tsd-kind-icon">key<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<ul>
+							<li>Defined in MKPlayerConfiguration.ts:38</li>
+						</ul>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>license key for the video player</p>
+						</div>
+					</div>
+				</section>
 				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
 					<a name="muted" class="tsd-anchor"></a>
 					<h3>muted</h3>
@@ -157,6 +175,36 @@
 						</div>
 					</div>
 				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="targetlatency" class="tsd-anchor"></a>
+					<h3>target<wbr>Latency</h3>
+					<div class="tsd-signature tsd-kind-icon">target<wbr>Latency<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
+					<aside class="tsd-sources">
+						<ul>
+							<li>Defined in MKPlayerConfiguration.ts:33</li>
+						</ul>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>number of seconds the player attempts to stay behind the live point</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="ui" class="tsd-anchor"></a>
+					<h3>ui</h3>
+					<div class="tsd-signature tsd-kind-icon">ui<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+						<ul>
+							<li>Defined in MKPlayerConfiguration.ts:28</li>
+						</ul>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Boolean to enable / disable ui</p>
+						</div>
+					</div>
+				</section>
 			</section>
 		</div>
 		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
@@ -189,12 +237,21 @@
 							<li class=" tsd-kind-property tsd-parent-kind-interface">
 								<a href="mkplayerconfiguration.html#debug" class="tsd-kind-icon">debug</a>
 							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="mkplayerconfiguration.html#key" class="tsd-kind-icon">key</a>
+							</li>
 							<li class=" tsd-kind-property tsd-parent-kind-interface">
 								<a href="mkplayerconfiguration.html#muted" class="tsd-kind-icon">muted</a>
 							</li>
 							<li class=" tsd-kind-property tsd-parent-kind-interface">
 								<a href="mkplayerconfiguration.html#smallscreen" class="tsd-kind-icon">small<wbr>Screen</a>
 							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="mkplayerconfiguration.html#targetlatency" class="tsd-kind-icon">target<wbr>Latency</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="mkplayerconfiguration.html#ui" class="tsd-kind-icon">ui</a>
+							</li>
 						</ul>
 					</li>
 				</ul>

package/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en'>
 <head>
-    <title>MKPlayer 1.0.10</title>
+    <title>MKPlayer 1.0.12</title>
     <meta charset='UTF-8'/>
     <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
@@ -98,7 +98,7 @@
                     <input type='radio' name='options' id='option-hls-subtitle' autocomplete='off'>HLS Subtitle
                 </label>
                 <label class='btn btn-outline-secondary'>
-                    <input type='radio' name='options' id='option-mp4-1' autocomplete='off'>MP4 Source 1
+                    <input type='radio' name='options' id='option-emsg-1' autocomplete='off'>EMSG Live
                 </label>
                 <label class='btn btn-outline-secondary'>
                     <input type='radio' name='options' id='option-mp4-2' autocomplete='off'>MP4 Source 2
@@ -151,19 +151,33 @@
             <p id='playbackBitrate'>Video Playback Bitrate: unknown</p>
         </div>
     </div>
+    <div class='row'>
+      <div class='col-12'>
+        <p id='wallClockTime'>Wall Clock Time: unknown</p>
+      </div>
+    </div>
+    <div class='row'>
+      <div class='col-12'>
+        <p id='segmentTime'>Segment Time: unknown</p>
+      </div>
+    </div>
     <div class='row'>
         <div class='col-12'>
             <p id='segmentPlaybackLabel'>Segment: unknown</p>
         </div>
     </div>
+    <div class='row'>
+        <div class='col-12'>
+            <p id='metadataLabel'>Metadata: unknown</p>
+        </div>
+    </div>
 </div>
 <script type='text/javascript'>
-  let mkPlayer;
   let vodButton = $('#option-vod').parent();
   let dashVodButton = $('#option-dash-vod').parent();
   let dashSubtitleButton = $('#option-dash-subtitle').parent();
   let hlsSubtitleButton = $('#option-hls-subtitle').parent();
-  let mp4Button = $('#option-mp4-1').parent();
+  let emsgButton = $('#option-emsg-1').parent();
   let mp4Button2 = $('#option-mp4-2').parent();
   let mp4Button3 = $('#option-mp4-3').parent();
   let liveButton = $('#option-live').parent();
@@ -189,6 +203,19 @@
     });
   }
 
+  function formatTimestamp(timestamp) {
+    var date = new Date(timestamp * 1000);
+    var hours = date.getHours();
+    var minutes = "0" + date.getMinutes();
+    var seconds = "0" + date.getSeconds();
+    var millis = "0" + date.getMilliseconds();
+
+    var formattedTime =  date.toDateString() + ' ' + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2) + ':' + millis.substr(-3);
+
+    return formattedTime;
+
+  }
+
   vodButton.on('click', function() {
     vodButton.button('toggle');
     deselectCustomLoadButton();
@@ -224,10 +251,10 @@
     load(errorSource);
   });
 
-  mp4Button.on('click', function() {
-    mp4Button.button('toggle');
+  emsgButton.on('click', function() {
+    emsgButton.button('toggle');
     deselectCustomLoadButton();
-    load(mp4Source);
+    load(emsgSource);
   });
 
   mp4Button2.on('click', function() {
@@ -247,7 +274,7 @@
     deselectCustomLoadButton();
 
     mkPlayer.unload();
-    load(liveSource);
+    load(liveId3Source);
   });
 
   customStreamButton.on('click', function() {
@@ -260,7 +287,7 @@
       assetIdentifier: 'Custom Source',
     };
 
-    if($('#subtitle-url').val() && $('#subtitle-language').val()) {
+    if ($('#subtitle-url').val() && $('#subtitle-language').val()) {
       customSource.subtitleTracks = [{
         url: $('#subtitle-url').val(),
         language: $('#subtitle-language').val(),
@@ -279,9 +306,26 @@
   });
 
   let liveSource = {
-    primaryUrl: "https://live-mkmsctacdn.azureedge.net/cmaf/TESTCES1/index.m3u8",
+    primaryUrl: "https://cdn-0573.aas.mediakind.com/cmaf/CES-Hero/index.m3u8",
     cdnFailoverPercent: 10,
     assetIdentifier: 'DASH Live',
+    subtitleTracks: [{
+      url: "https://cestestssl.akamaized.net/hls/live/2023638/cestest6/master_captionENG.m3u8",
+      language: '123',
+      type: 'm3u8'
+    }]
+  };
+
+  let liveId3Source = {
+    primaryUrl: "http://52.232.209.101/hls-ts/MKChannelOne/index.m3u8",
+    cdnFailoverPercent: 10,
+    assetIdentifier: 'ID3 Live',
+  };
+
+  let emsgSource = {
+    primaryUrl: "https://livesim.dashif.org/livesim/scte35_2/testpic_2s/Manifest.mpd",
+    cdnFailoverPercent: 0,
+    assetIdentifier: 'EMSG Live',
   };
 
   let dashSubtitleSource = {
@@ -291,7 +335,7 @@
       language: 'aa',
     }],
     assetIdentifier: 'DASH Subtitle',
-    poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png'
+    poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
   };
 
   let dashVodSource = {
@@ -307,7 +351,7 @@
   let hlsSubtitleSource = {
     primaryUrl: 'https://mk-orionsedge.azureedge.net/test/hls/tos/index.m3u8',
     cdnFailoverPercent: 0,
-    assetIdentifier: 'HLS Subtitle'
+    assetIdentifier: 'HLS Subtitle',
   }
 
   var vodSource = {
@@ -341,7 +385,7 @@
       {
         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',
         language: 'ms',
-      }
+      },
     ],
   }
 
@@ -356,10 +400,11 @@
     autoplay: true,
     muted: true,
     smallScreen: false,
+    key: '84dc4716-55f9-43fa-ae8e-6fa334c5189b'
   };
 
   let playerContainer = document.getElementById('testPlayer');
-  mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
+  let mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
 
   mkPlayer.on('error', function(event) {
     console.error('[MKPlayer] error: %d - %s', event.code, event.name);
@@ -373,14 +418,25 @@
     console.info('[MKPlayer] ready ' + event.timestamp);
   })
 
+  const getAudioBufferLevel = function() {
+    return mkPlayer.getBufferLevels().audio
+  };
+  const getVideoBufferLevel = function() {
+    return mkPlayer.getBufferLevels().video
+  };
   mkPlayer.on('timechanged', function(event) {
-    var videoBufferLevel = Math.round(getVideoBufferLevel() * 100) / 100;
+    let videoBufferLevel = Math.round(getVideoBufferLevel() * 100) / 100;
     $('#videoBuffer').css('width', videoBufferLevel + '%').attr('aria-valuenow', videoBufferLevel);
     $('#videoBuffer').text(videoBufferLevel)
 
-    var audioBufferLevel = Math.round(getAudioBufferLevel() * 100) / 100;
+    let audioBufferLevel = Math.round(getAudioBufferLevel() * 100) / 100;
     $('#audioBuffer').css('width', audioBufferLevel + '%').attr('aria-valuenow', audioBufferLevel);
     $('#audioBuffer').text(audioBufferLevel)
+
+    $('#segmentTime').text('Segment Time: ' +  formatTimestamp(event.time))
+
+    $('#wallClockTime').text('Wall Clock Time: ' + formatTimestamp(Date.now()/1000))
+
   })
 
   mkPlayer.on('playing', function(event) {
@@ -389,10 +445,11 @@
       $('#startupTime').text('Video Startup Time: ' + startupTime.getSeconds() + "." + startupTime.getMilliseconds());
       startupTimeCalculated = true
     }
+    console.info('[MKPlayer] playing: ' + JSON.stringify(event));
   })
 
   mkPlayer.on('paused', function(event) {
-    console.info('[MKPlayer] paused' + JSON.stringify(event));
+    console.info('[MKPlayer] paused: ' + JSON.stringify(event));
   })
 
   mkPlayer.on('playbackfinished', (event) => {
@@ -403,8 +460,8 @@
     if (event.mimeType === 'video/mp4') {
       let segmentUrl = event.url
       let fileNameIndex = segmentUrl.lastIndexOf("/") + 1;
-      var filename = segmentUrl.substr(fileNameIndex);
-      $('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + ' currentTime=' + mkPlayer.getCurrentTime() + ' time=' + event.playbackTime)
+      const filename = segmentUrl.substr(fileNameIndex);
+      $('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + ' time=' + event.playbackTime)
       previousSegmentPlaybackTime = event.playbackTime;
     }
   })
@@ -414,15 +471,15 @@
     $('#playbackBitrate').text('Video Playback Quality: ' + currentPlayingBitrate)
   });
 
-  var getVideoBufferLevel = function() {
-    return mkPlayer.getBufferLevels().video
-  }
+  mkPlayer.on('metadata', function(event) {
+    $('#metadataLabel').text('Metadata: ' + JSON.stringify(event));
+  });
 
-  var getAudioBufferLevel = function() {
-    return mkPlayer.getBufferLevels().audio
-  }
+  mkPlayer.on('metadataparsed', function(event) {
+    console.info('[MKPlayer] metadata parsed' + JSON.stringify(event));
+  });
 
-  load(liveSource)
+  load(liveId3Source)
 
 </script>
 </body>