@mediakind/mkplayer 1.4.1 → 1.4.3

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.
Files changed (9) hide show
  1. package/README.md +104 -59
  2. package/classes/player/MKPlayer.d.ts +1 -1
  3. package/interfaces/MKEnvironmentConfig.d.ts +6 -0
  4. package/interfaces/MKPlayerAPI.d.ts +1 -1
  5. package/interfaces/MKRegisteredSource.d.ts +2 -2
  6. package/interfaces/index.d.ts +1 -1
  7. package/mkplayer.js +1 -1
  8. package/package.json +1 -1
  9. package/interfaces/MKAzukiConfig.d.ts +0 -7
package/README.md CHANGED
@@ -4,115 +4,160 @@ Our main goal is to provide a simple, abstract API that allows you to quickly ge
4
4
 
5
5
  Please reach out to MediaKind team as a player (mandatory) and analytics (optional) license subscription is required and respective domains must be whitelisted on which our player is expected to run on.
6
6
 
7
- ### Getting started
8
- Include `mkplayer.js` and `mkplayer-ui.css` in your HTML file as below:
7
+ ## Getting Started
9
8
 
10
- ```html
11
- <script type="text/javascript" src="mkplayer.js"></script>
12
- <link rel="stylesheet" href="mkplayer-ui.css">
9
+ ### Step 1: Get the latest release of MKPlayer.
10
+ You can checkout the latest version of MKPlayer from [npmjs.com](https://www.npmjs.com/) using the following command:
11
+ ```
12
+ npm i @mediakind/mkplayer
13
13
  ```
14
14
 
15
- Add a `<div>` for the video player as below:
15
+ ### Step 2: Include JavaScript and CSS files in the head of your page.
16
+ After getting hold of the latest version of MKPlayer from NPM, you need to include `mkplayer.js` and `mkplayer-ui.css` in the `<head>` of your HTML page as below:
16
17
 
17
18
  ```html
18
- <div id="player-container"></div>
19
+ <head>
20
+ <title>My Video Player</title>
21
+ <meta charset="utf-8">
22
+ <meta name="viewport" content="width=device-width, initial-scale=1">
23
+ <!-- MKPlayer JavaScript and CSS -->
24
+ <script type="text/javascript" src="./node_modules/@mediakind/mkplayer/mkplayer.js"></script>
25
+ <link rel="stylesheet" href="./node_modules/@mediakind/mkplayer/mkplayer-ui.css">
26
+ </head>
19
27
  ```
20
28
 
21
- Next initialize the video player as below:
22
-
23
- ```javascript
24
- // Player configuration
25
- const playerConfig = {
26
- ui: true,
27
- key: "<YOUR PLAYER LICENSE KEY>",
28
- playback: {
29
- muted: true,
30
- autoplay: true
31
- }
32
- }
29
+ ### Step 3: Add a HTML `<div>` for your video container.
30
+ As the next step you need to define a HTML `<div>` in your HTML page `<body>`. This is going to be your video container used by the player for playback.
33
31
 
34
- // Player container element
35
- const playerContainer = document.getElementById("player-container");
36
-
37
- // Initialize player
38
- let player = new mkplayer.MKPlayer(playerContainer, playerConfig);
32
+ ```html
33
+ <body>
34
+ <div id="video-container"></div>
35
+ </body>
39
36
  ```
40
37
 
41
- Register for various player events prior to loading a source but after player initialization using one of the methods as shown below:
42
-
43
- - Register for player events via player configuration at the time of player initialisation as below:
44
-
38
+ ### Step 4: Player initialization.
39
+ Now, inside your JavaScript source, we can initialize the player and configure the player for your needs as below:
45
40
  ```javascript
46
- // Player configuration
41
+ // 1. Grab the video container
42
+ const videoContainer = document.getElementById("video-container");
43
+
44
+ // 2. Prepare the player configuration
47
45
  const playerConfig = {
48
- ui: true,
49
- key: "<YOUR PLAYER LICENSE KEY>",
46
+ key: "PLAYER_LICENSE_HERE",
50
47
  playback: {
51
48
  muted: true,
52
49
  autoplay: true
53
50
  },
51
+ // Subscribe to player events
54
52
  events: {
55
- [mkplayer.MKPlayerEvent.SourceLoaded]: (event) => {
56
- console.log("Source loaded: ", event);
57
- },
58
- [mkplayer.MKPlayerEvent.Playing]: (event) => {
59
- console.log("Playing: ", event);
53
+ [mkplayer.MKPlayerEvent.Error]: (event) => {
54
+ console.log("Encountered player error: ", JSON.stringify(event));
60
55
  },
61
- [mkplayer.MKPlayerEvent.Paused]: (event) => {
62
- console.log("Paused: ", event);
56
+ [mkplayer.MKPlayerEvent.TimeChanged]: (event) => {
57
+ console.log("Current player position: ", event.time);
63
58
  }
64
59
  }
65
- }
60
+ };
61
+
62
+ // 3. Initialize the player with video container and player configuration
63
+ let player = new mkplayer.MKPlayer(videoContainer, playerConfig);
66
64
  ```
65
+ Please see [MKPlayerConfig](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/interfaces/MKPlayerConfig.html) for more details.
67
66
 
68
- - Dynamically register and handle player events as below:
67
+ From this point onwards, we are all set to use the many player API's and handle and respond to the many player events.
69
68
 
70
- ```javascript
69
+ Optionally you can dynamically subscribe to player events in addition to the ones subscribed in player configuration as below:
70
+ ```javascript
71
71
  player.on(mkplayer.MKPlayerEvent.SourceLoaded, (event) => {
72
- console.log("Source loaded: ", event);
72
+ console.log("Source loaded successfully!");
73
73
  });
74
74
 
75
- player.on(mkplayer.MKPlayerEvent.Playing, (event) => {
76
- console.log("Playing: ", event);
77
- });
78
-
79
- player.on(mkplayer.MKPlayerEvent.Paused, (event) => {
80
- console.log("Paused: ", event);
75
+ player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
76
+ console.log("Player is ready for playback!");
81
77
  });
82
78
  ```
83
79
 
84
- Load a source for starting playback:
80
+ ### Step 5: Start playback.
81
+ At this step, we have a player which is properly initialized and ready for use. All we need to do now is prepare a source configuration object as below:
85
82
 
86
83
  ```javascript
87
- // Prepare the source configuration object
88
84
  const sourceConfig = {
89
- title: "MySource",
90
- description: "My first MKPlayer Source",
85
+ title: "Title for your source",
86
+ description: "Brief description of your source",
91
87
  poster: "https://my-cdn.com/mysource/poster.png",
92
88
  hls: "https://my-cdn.com/mysource/hls/index.m3u8",
93
89
  dash: "https://my-cdn.com/mysource/dash/manifest.mpd"
94
- }
90
+ };
91
+ ```
92
+ When attempting to setup playback for DRM protected content, we need to pass in a [MKDRMConfig](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/interfaces/MKDrmConfig.html) as one of the properties to the source configuration above as below:
93
+ ```javascript
94
+ const sourceConfig = {
95
+ title: "Title for your source",
96
+ description: "Brief description of your source",
97
+ poster: "https://my-cdn.com/mysource/poster.png",
98
+ hls: "https://my-cdn.com/mysource/hls/index.m3u8",
99
+ dash: "https://my-cdn.com/mysource/dash/manifest.mpd",
100
+ // when your source is DRM protected
101
+ drm: {
102
+ widevine: {
103
+ LA_URL: "License server URL",
104
+ headers: { // custom headers if available
105
+ X-CustomHeader1: "Custom header value",
106
+ X-CustomHeader2: "Custom header value",
107
+ }
108
+ },
109
+ playready: {
110
+ LA_URL: "License server URL",
111
+ headers: { // custom headers if available
112
+ X-CustomHeader1: "Custom header value",
113
+ X-CustomHeader2: "Custom header value",
114
+ }
115
+ },
116
+ // FairPlay DRM applies only to HLS sources on apple devices
117
+ fairplay: {
118
+ LA_URL: "License server URL",
119
+ certificateURL: "Certificate URL",
120
+ headers: { // custom headers if available
121
+ X-CustomHeader1: "Custom header value",
122
+ X-CustomHeader2: "Custom header value",
123
+ }
124
+ }
125
+ }
126
+ };
127
+ ```
128
+ Please see [MKSourceConfig](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/interfaces/MKSourceConfig.html) for more details.
95
129
 
96
- // Load the source to start playback
130
+ Now with the above source config we are all set to start playback as below:
131
+ ```javascript
97
132
  player.load(sourceConfig)
133
+ .then(() => {
134
+ // you can also get notified when subscribed to `SourceLoaded` event.
135
+ console.log("Source loaded successfull!");
136
+ })
98
137
  .catch((error) => {
99
- console.error("Load failed with error: ", error);
138
+ console.error("An error occurred while loading the source!);
100
139
  });
101
140
  ```
102
141
 
103
- Unload the currently playing source to stop playback:
104
-
142
+ ### Step 6: Stop playback.
143
+ To stop the current playback session:
105
144
  ```javascript
106
145
  player.unload()
146
+ .then(() => {
147
+ // you can also get notified when subscribed to `SourceUnloaded` event.
148
+ console.log("Source unloaded successfully!");
149
+ })
107
150
  .catch((error) => {
108
151
  console.error("Source unload failed with error: ", error);
109
152
  });
110
153
  ```
111
154
 
112
- To destroy the player instance and release all held resources, you can call `destroy()`. You must create a new instance of the player after a call to `destroy()`.
113
-
155
+ ### Step 7: Destroy player instance and release resources.
156
+ Finally to destroy the player instance and release all held resources, you can call `destroy()`. You must create a new instance of the player after a call to `destroy()`.
114
157
  ```javascript
115
158
  player.destroy();
159
+
160
+ // It is recommended to wait for `Destroy` event notification after a call to `destroy()`.
116
161
  ```
117
162
 
118
163
  ### For more details, please checkout our [API Reference](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/index.html)
package/classes/player/MKPlayer.d.ts CHANGED
@@ -74,7 +74,7 @@ export declare class MKPlayer extends MKEventBase implements MKPlayerAPI {
74
74
  setAudioQuality(audioQualityID: string): void;
75
75
  setAuthorizationToken(authorizationToken: string): void;
76
76
  setInhomeStatus(inhomeStatus: boolean): void;
77
- setLocationDetail(locationDetail: string): void;
77
+ setLocationDetail(locationDetail: string | null): void;
78
78
  setLogLevel(level: MKLogLevel): void;
79
79
  setPlaybackSpeed(speed: number): void;
80
80
  setPosterImage(url: string, keepPersistent: boolean): void;
package/interfaces/MKEnvironmentConfig.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export interface MKEnvironmentConfig {
2
+ serverUrl: string;
3
+ clientUrl?: string;
4
+ authToken: string;
5
+ ownerUid?: string;
6
+ }
package/interfaces/MKPlayerAPI.d.ts CHANGED
@@ -76,7 +76,7 @@ export interface MKPlayerAPI {
76
76
  setAudioQuality(audioQualityID: string): void;
77
77
  setAuthorizationToken(authorizationToken: string): void;
78
78
  setInhomeStatus(inhomeStatus: boolean): void;
79
- setLocationDetail(locationDetail: string): void;
79
+ setLocationDetail(locationDetail: string | null): void;
80
80
  setLogLevel(level: MKLogLevel): void;
81
81
  setPlaybackSpeed(speed: number): void;
82
82
  setPosterImage(url: string, keepPersistent: boolean): void;
package/interfaces/MKRegisteredSource.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { MKAdobePrimetimeConfig } from "./MKAdobePrimetimeConfig";
2
- import { MKAzukiConfig } from "./MKAzukiConfig";
2
+ import { MKEnvironmentConfig } from "./MKEnvironmentConfig";
3
3
  export interface MKRegisteredSource {
4
4
  mediaId: string;
5
5
  adobePrimetimeConfig?: MKAdobePrimetimeConfig;
6
- azukiConfig: MKAzukiConfig;
6
+ environmentConfig: MKEnvironmentConfig;
7
7
  applicationToken?: string;
8
8
  catchupStartTime?: string;
9
9
  isDvrFromRollingBuffer?: boolean;
package/interfaces/index.d.ts CHANGED
@@ -8,7 +8,6 @@ export { MKAdCompanion } from "./MKAdCompanion";
8
8
  export { MKAudioAdaptationData } from "./MKAudioAdaptationData";
9
9
  export { MKAudioQuality } from "./MKAudioQuality";
10
10
  export { MKAudioTrack } from "./MKAudioTrack";
11
- export { MKAzukiConfig } from "./MKAzukiConfig";
12
11
  export { MKBitrateLimitationConfig } from "./MKBitrateLimitationConfig";
13
12
  export { MKBufferConfig } from "./MKBufferConfig";
14
13
  export { MKBufferLevel } from "./MKBufferLevel";
@@ -21,6 +20,7 @@ export { MKDownloadedData } from "./MKDownloadedData";
21
20
  export { MKDownloadedVideoData } from "./MKDownloadedVideoData";
22
21
  export { MKDrmConfig } from "./MKDrmConfig";
23
22
  export { MKDrmLicense } from "./MKDrmLicense";
23
+ export { MKEnvironmentConfig } from "./MKEnvironmentConfig";
24
24
  export { MKError } from "./MKError";
25
25
  export { MKFairplayDrmConfig } from "./MKFairplayDrmConfig";
26
26
  export { MKHttpRequestOptions } from "./MKHttpRequestOptions";