@mediakind/mkplayer 1.0.13 → 1.0.14

package/doc/classes/mkplayer.html

@@ -191,7 +191,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:195</li>
+									<li>Defined in MKPlayer.ts:202</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -213,7 +213,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:186</li>
+									<li>Defined in MKPlayer.ts:193</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -235,7 +235,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:214</li>
+									<li>Defined in MKPlayer.ts:221</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -288,7 +288,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:221</li>
+									<li>Defined in MKPlayer.ts:228</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -310,7 +310,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:158</li>
+									<li>Defined in MKPlayer.ts:165</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -343,7 +343,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:170</li>
+									<li>Defined in MKPlayer.ts:177</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -420,7 +420,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:228</li>
+									<li>Defined in MKPlayer.ts:235</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -442,7 +442,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:206</li>
+									<li>Defined in MKPlayer.ts:213</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -472,7 +472,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:245</li>
+									<li>Defined in MKPlayer.ts:252</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -503,7 +503,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:179</li>
+									<li>Defined in MKPlayer.ts:186</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -525,7 +525,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:235</li>
+									<li>Defined in MKPlayer.ts:242</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
@@ -547,7 +547,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in MKPlayer.ts:252</li>
+									<li>Defined in MKPlayer.ts:259</li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">

package/doc/index.html

@@ -92,6 +92,14 @@ mkPlayer = <span class="hljs-keyword">new</span> mkplayer.MKPlayer(playerContain
   <span class="hljs-attr">cdnFailoverPercent</span>: <span class="hljs-number">10</span>, <span class="hljs-comment">//10 percent of streams will start with the secondary url</span>
   <span class="hljs-attr">assetIdentifier</span>: <span class="hljs-string">&#x27;Your Asset Id&#x27;</span>,
   <span class="hljs-attr">poster</span>: <span class="hljs-string">&#x27;https://your-cdn.com/poster.png&#x27;</span>
+
+  <span class="hljs-comment">// optional analytics information</span>
+  <span class="hljs-attr">userId</span>: <span class="hljs-string">&#x27;badge2&#x27;</span>,
+  <span class="hljs-attr">customData1</span>: <span class="hljs-string">&#x27;customData1&#x27;</span>,
+  <span class="hljs-attr">customData2</span>: <span class="hljs-string">&#x27;customData2&#x27;</span>,
+  <span class="hljs-attr">customData3</span>: <span class="hljs-string">&#x27;customData3&#x27;</span>,
+  <span class="hljs-attr">customData4</span>: <span class="hljs-string">&#x27;customData4&#x27;</span>,
+  <span class="hljs-attr">customData5</span>: <span class="hljs-string">&#x27;customData5&#x27;</span>,
 }
 
 mkPlayer.load(mkStream).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

package/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en'>
 <head>
-    <title>MKPlayer 1.0.13</title>
+    <title>MKPlayer 1.0.14</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'>
@@ -306,14 +306,14 @@
   });
 
   let liveSource = {
-    primaryUrl: "https://cdn-0573.aas.mediakind.com/cmaf/CES-Hero/index.m3u8",
+    primaryUrl: "http://52.232.209.101/cmaf/LiveCloudVideoTestChannel/index.m3u8",
     cdnFailoverPercent: 10,
     assetIdentifier: 'DASH Live',
-    subtitleTracks: [{
-      url: "https://cestestssl.akamaized.net/hls/live/2023638/cestest6/master_captionENG.m3u8",
-      language: '123',
-      type: 'm3u8'
-    }]
+    // subtitleTracks: [{
+    //   url: "https://cestestssl.akamaized.net/hls/live/2023638/cestest6/master_captionENG.m3u8",
+    //   language: '123',
+    //   type: 'm3u8'
+    // }]
   };
 
   let liveId3Source = {
@@ -336,6 +336,7 @@
     }],
     assetIdentifier: 'DASH Subtitle',
     poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
+    userId: 'badge1'
   };
 
   let dashVodSource = {
@@ -346,12 +347,19 @@
       url: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
       language: 'ms',
     }],
+    userId: 'badge2',
+    customData1: 'customData1',
+    customData2: 'customData2',
+    customData3: 'customData3',
+    customData4: 'customData4',
+    customData5: 'customData5',
   }
 
   let hlsSubtitleSource = {
     primaryUrl: 'https://mk-orionsedge.azureedge.net/test/hls/tos/index.m3u8',
     cdnFailoverPercent: 0,
     assetIdentifier: 'HLS Subtitle',
+    userId: 'badge3'
   }
 
   var vodSource = {
@@ -479,7 +487,7 @@
     console.info('[MKPlayer] metadata parsed' + JSON.stringify(event));
   });
 
-  load(liveId3Source)
+  load(liveSource)
 
 </script>
 </body>

package/multi-camera.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en'>
 <head>
-    <title>MKPlayer 1.0.13</title>
+    <title>MKPlayer 1.0.14</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'>
@@ -116,10 +116,10 @@
                         <input type='radio' name='options' id='option-latency3' autocomplete='off'>3 sec
                     </label>
                     <label class='btn btn-outline-secondary'>
-                        <input type='radio' name='options' id='option-latency6' autocomplete='off'>6 sec
+                        <input type='radio' name='options' id='option-latency6' autocomplete='off'>4 sec
                     </label>
                     <label class='btn btn-outline-secondary'>
-                        <input type='radio' name='options' id='option-latency8' autocomplete='off'>8 sec
+                        <input type='radio' name='options' id='option-latency8' autocomplete='off'>6 sec
                     </label>
                 </div>
             </div>
@@ -129,10 +129,10 @@
                         <input type='radio' name='options' id='option-latency3-2' autocomplete='off'>3 sec
                     </label>
                     <label class='btn btn-outline-secondary'>
-                        <input type='radio' name='options' id='option-latency6-2' autocomplete='off'>6 sec
+                        <input type='radio' name='options' id='option-latency6-2' autocomplete='off'>4 sec
                     </label>
                     <label class='btn btn-outline-secondary'>
-                        <input type='radio' name='options' id='option-latency8-2' autocomplete='off'>8 sec
+                        <input type='radio' name='options' id='option-latency8-2' autocomplete='off'>6 sec
                     </label>
                 </div>
             </div>
@@ -142,10 +142,10 @@
                         <input type='radio' name='options' id='option-latency3-3' autocomplete='off'>3 sec
                     </label>
                     <label class='btn btn-outline-secondary'>
-                        <input type='radio' name='options' id='option-latency6-3' autocomplete='off'>6 sec
+                        <input type='radio' name='options' id='option-latency6-3' autocomplete='off'>4 sec
                     </label>
                     <label class='btn btn-outline-secondary'>
-                        <input type='radio' name='options' id='option-latency8-3' autocomplete='off'>8 sec
+                        <input type='radio' name='options' id='option-latency8-3' autocomplete='off'>6 sec
                     </label>
                 </div>
             </div>
@@ -229,13 +229,13 @@
       });
 
       latency8Button.on('click', function() {
-        console.log('Setting Latency to 8')
-        mkPlayer1.setTargetLatency(8)
+        console.log('Setting Latency to 6')
+        mkPlayer1.setTargetLatency(6)
       });
 
       latency6Button.on('click', function() {
-        console.log('Setting Latency to 6')
-        mkPlayer1.setTargetLatency(6)
+        console.log('Setting Latency to 4')
+        mkPlayer1.setTargetLatency(4)
       });
 
       latency3Button2.on('click', function() {
@@ -244,13 +244,13 @@
       });
 
       latency8Button2.on('click', function() {
-        console.log('Setting Latency to 8')
-        mkPlayer2.setTargetLatency(8)
+        console.log('Setting Latency to 6')
+        mkPlayer2.setTargetLatency(6)
       });
 
       latency6Button2.on('click', function() {
-        console.log('Setting Latency to 6')
-        mkPlayer2.setTargetLatency(6)
+        console.log('Setting Latency to 4')
+        mkPlayer2.setTargetLatency(4)
       });
 
       latency3Button3.on('click', function() {
@@ -259,13 +259,13 @@
       });
 
       latency8Button3.on('click', function() {
-        console.log('Setting Latency to 8')
-        mkPlayer3.setTargetLatency(8)
+        console.log('Setting Latency to 6')
+        mkPlayer3.setTargetLatency(6)
       });
 
       latency6Button3.on('click', function() {
-        console.log('Setting Latency to 6')
-        mkPlayer3.setTargetLatency(6)
+        console.log('Setting Latency to 4')
+        mkPlayer3.setTargetLatency(4)
       });
 
       mkPlayer1.on('latencymodechanged', (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediakind/mkplayer",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "MediaKind Web Player",
   "repository": {
     "type": "git",

package/src/MKPlayer.ts

@@ -133,6 +133,13 @@ export class MKPlayer {
     if (stream.assetIdentifier) {
       playerSource.analytics = {
         videoId: stream.assetIdentifier,
+        userId: stream.userId,
+        customData1: stream.customData1,
+        customData2: stream.customData2,
+        customData3: stream.customData3,
+        customData4: stream.customData4,
+        customData5: stream.customData5,
+        customData6: this.version(),
       };
     }
 

package/src/MKStream.ts

@@ -10,6 +10,12 @@ export class MKStream {
   private readonly _subtitleTracks: SubtitleTrack[];
   private readonly _cdnFailoverPercent: number = 0;
   private readonly _poster: string;
+  private readonly _userId: string;
+  private readonly _customData1: string;
+  private readonly _customData2: string;
+  private readonly _customData3: string;
+  private readonly _customData4: string;
+  private readonly _customData5: string;
 
   /**
    *
@@ -21,13 +27,19 @@ export class MKStream {
    *   the secondary url
    * @param assetIdentifier - identifier for the current stream
    */
-  constructor(primaryUrl: string, assetIdentifier: string, subtitleTracks?: SubtitleTrack[], poster?: string, secondaryUrl?: string, cdnFailoverPercent?: number) {
+  constructor(primaryUrl: string, assetIdentifier: string, subtitleTracks?: SubtitleTrack[], poster?: string, secondaryUrl?: string, cdnFailoverPercent?: number, userId?: string, customData1?: string, customData2?: string, customData3?: string, customData4?: string, customData5?: string) {
     this._cdnFailoverPercent = cdnFailoverPercent;
     this._secondaryUrl = secondaryUrl;
     this._primaryUrl = primaryUrl;
     this._assetIdentifier = assetIdentifier;
     this._subtitleTracks = subtitleTracks;
     this._poster = poster;
+    this._userId = userId;
+    this._customData1 = customData1;
+    this._customData2 = customData2;
+    this._customData3 = customData3;
+    this._customData4 = customData4;
+    this._customData5 = customData5;
   }
 
   /**
@@ -71,4 +83,46 @@ export class MKStream {
   public get poster(): string {
     return this._poster;
   }
+
+  /**
+   * customData1 field for the current stream
+   */
+  public get customData1(): string {
+    return this._customData1;
+  }
+
+  /**
+   * customData2 field for the current stream
+   */
+  public get customData2(): string {
+    return this._customData2;
+  }
+
+  /**
+   * customData3 field for the current stream
+   */
+  public get customData3(): string {
+    return this._customData3;
+  }
+
+  /**
+   * customData5 field for the current stream
+   */
+  public get customData4(): string {
+    return this._customData4;
+  }
+
+  /**
+   * customData5 field for the current stream
+   */
+  public get customData5(): string {
+    return this._customData5;
+  }
+
+  /**
+   * userId field for the current stream
+   */
+  public get userId(): string {
+    return this._userId;
+  }
 }