npm - @mediakind/mkplayer - Versions diffs - 1.7.0 → 1.9.0 - Mend

@mediakind/mkplayer 1.7.0 → 1.9.0

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 (655) hide show

package/README.md CHANGED Viewed

@@ -2,162 +2,7 @@ MKPlayer is an HTML5 video player SDK used for playing back HLS and DASH adaptiv
 Our main goal is to provide a simple, abstract API that allows you to quickly get video playback of MediaKind streams running on your web page.
-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.
+A valid license subscription and whitelisting of domains is required in-order to use this SDK pacakge. Please reach out to us for more information regarding this.
 ## Getting Started
-### Step 1: Get the latest release of MKPlayer.
-You can checkout the latest version of MKPlayer from [npmjs.com](https://www.npmjs.com/) using the following command:
-```
-npm i @mediakind/mkplayer
-```
-### Step 2: Include JavaScript and CSS files in the head of your page.
-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:
-```html
-<head>
-    <title>My Video Player</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- MKPlayer JavaScript and CSS -->
-    <script  type="text/javascript"  src="./node_modules/@mediakind/mkplayer/mkplayer.js"></script>
-    <link  rel="stylesheet"  href="./node_modules/@mediakind/mkplayer/mkplayer-ui.css">
-</head>
-```
-### Step 3: Add a HTML `<div>` for your video container.
-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.
-```html
-<body>
-    <div id="video-container"></div>
-</body>
-```
-### Step 4: Player initialization.
-Now, inside your JavaScript source, we can initialize the player and configure the player for your needs as below:
-```javascript
-// 1. Grab the video container
-const videoContainer = document.getElementById("video-container");
-// 2. Prepare the player configuration
-const playerConfig = {
-    key: "PLAYER_LICENSE_HERE",
-    playback: {
-        muted: true,
-        autoplay: true
-    },
-    // Subscribe to player events
-    events: {
-        [mkplayer.MKPlayerEvent.Error]: (event) => {
-            console.log("Encountered player error: ", JSON.stringify(event));
-        },
-        [mkplayer.MKPlayerEvent.TimeChanged]: (event) => {
-            console.log("Current player position: ", event.time);
-        }
-    }
-};
-// 3. Initialize the player with video container and player configuration
-let player = new mkplayer.MKPlayer(videoContainer, playerConfig);
-```
-Please see [MKPlayerConfig](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/interfaces/MKPlayerConfig.html) for more details.
-From this point onwards, we are all set to use the many player API's and handle and respond to the many player events.
-Optionally you can dynamically subscribe to player events in addition to the ones subscribed in player configuration as below:
-```javascript
-player.on(mkplayer.MKPlayerEvent.SourceLoaded, (event) => {
-    console.log("Source loaded successfully!");
-});
-player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
-    console.log("Player is ready for playback!");
-});
-```
-### Step 5: Start playback.
-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:
-```javascript
-const sourceConfig = {
-    title: "Title for your source",
-    description: "Brief description of your source",
-    poster: "https://my-cdn.com/mysource/poster.png",
-    hls: "https://my-cdn.com/mysource/hls/index.m3u8",
-    dash: "https://my-cdn.com/mysource/dash/manifest.mpd"
-};
-```
-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:
-```javascript
-const sourceConfig = {
-    title: "Title for your source",
-    description: "Brief description of your source",
-    poster: "https://my-cdn.com/mysource/poster.png",
-    hls: "https://my-cdn.com/mysource/hls/index.m3u8",
-    dash: "https://my-cdn.com/mysource/dash/manifest.mpd",
-    // when your source is DRM protected
-    drm: {
-        widevine: {
-            LA_URL: "License server URL",
-            headers: { // custom headers if available
-                "X-CustomHeader1": "Custom header value",
-                "X-CustomHeader2": "Custom header value",
-            }
-        },
-        playready: {
-            LA_URL: "License server URL",
-            headers: { // custom headers if available
-                "X-CustomHeader1": "Custom header value",
-                "X-CustomHeader2": "Custom header value",
-            }
-        },
-        // FairPlay DRM applies only to HLS sources on apple devices
-        fairplay: {
-            LA_URL: "License server URL",
-            certificateURL: "Certificate URL",
-            headers: { // custom headers if available
-                "X-CustomHeader1": "Custom header value",
-                "X-CustomHeader2": "Custom header value",
-            }
-        }
-    }
-};
-```
-Please see [MKSourceConfig](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/interfaces/MKSourceConfig.html) for more details.
-Now with the above source config we are all set to start playback as below:
-```javascript
-player.load(sourceConfig)
-.then(() => {
-    // you can also get notified when subscribed to `SourceLoaded` event.
-    console.log("Source loaded successfull!");
-})
-.catch((error) => {
-    console.error("An error occurred while loading the source!);
-});
-```
-### Step 6: Stop playback.
-To stop the current playback session:
-```javascript
-player.unload()
-.then(() => {
-    // you can also get notified when subscribed to `SourceUnloaded` event.
-    console.log("Source unloaded successfully!");
-})
-.catch((error) => {
-    console.error("Source unload failed with error: ", error);
-});
-```
-### Step 7: Destroy player instance and release resources.
-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()`.
-```javascript
-player.destroy();
-// It is recommended to wait for `Destroy` event notification after a call to `destroy()`.
-```
-### For more details, please checkout our [API Reference](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/index.html)
+Please refer our [API Reference](https://mkplayer.azureedge.net/%24web/websdk/latest/docs/index.html) documentation for more information and help getting started.