@mediakind/wmc NPM

WMC SDK Documents (v1.0)

Overview

The WMC SDK libraries provide the interfaces that a client application (app) uses to control the HTML5 video playback based on the media player status. These libraries provide the client app with simplified media player interfaces, which enable the client app to be unconcerned about the complexity of the media player implementation.

(Web SDK) DRM Support on Desktop Devices

The following table contains details for the Browser and corresponding DRM support by WMC:

Browser	Minimum OS Version	DASH ClearKey	DASH Widevine	DASH/SMOOTH/HLS PlayReady	HLS AES128	HLS Widevine	HLS FairPlay
Chrome (last 3 major versions)	OS versions supported by Chrome	true	true	null	true	true	null
Firefox (last 3 major versions)	OS versions supported by Firefox	true	true	null	true	true	null
Safari 10+	macOS Sierra	false	null	null	true	null	true
MS Edge (last 3 major versions)	Windows 10	true	null	true	true	null	true
MS Edge (Chromium) (last 3 major versions)	Windows 7 / macOS 10.12	true	true	null	true	true	null
MS Edge (Chromium) (last 3 major versions)	Windows 8.1	true	true	true	true	true	null

WMC Reference Application

The released pre-built reference players if you want direct access without writing any Javascript.

The nightly build of the /dev branch reference player, is pre-release but contains the latest fixes. It is a good place to start if you are debugging playback problems.

Getting Started

The standard setup method uses javascript to initialize and provide video details to wmc-sdk.js. MediaPlayerFactory provides an alternative declarative setup syntax.

Installation guide

Download the zip file (wmchtml5*) from email.
Unzip the file which contains two main folders (dist and refApp)
Open command prompt from root folder (wmchtml5*) and Install http-server globally by using the command:
- npm install http-server -g
Then execute the following command from the same command prompt (it will create a local webserver):
- http-server
Open a browser and login into OSIM with the following credential before running RefApp for OSIM environment
- register-user-name@outlook.com / **********
Open the bellow URLs on different tab in the same browser:
- For LIVE asset: http://127.0.0.1:8080/RefApp/index.html
- For VOD asset: http://127.0.0.1:8080/RefApp/index.html
Now click on Play button.

Setting up the player quickly

Create a video element somewhere in your html. For our purposes, make sure the controls attribute is present.

<div id="player_container">
    <video id="video_element" poster="data/poster.svg" crossOrigin></video>
    <div id="subtitle_element"></div>
</div>

Add wmc.prod.js to the end of the head.

<head>
    ...
    <script src="wmc.prod.js"></script>
</head>

Now comes the good stuff. We need to create a MediaPlayer and initialize it.

var url = "https://wmc-sdk.akamaized.net/envivio/Enviviowmc-sdk3/manifest.mpd";
var player = new amc.AmcManager(server_url, owner_uid, user_token);
// register the basic playback events
player.addEventListener(amcEvents.AMC_EVENT_ERROR, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_BIT_RATE_CHANGED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_AUDIO_TRACKS_CHANGED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_PROGRAM_CHANGED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_TIMELINE_GAP, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_TEXT_TRACKS_ADDED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_EVENT_STREAM_DATA, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_EVENT_AD_MARKER_DATA, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_VIDEO_METRICS_CHANGED, processEvent);
player.addEventListener(amcEvents.AMC_EVENT_AUDIO_METRICS_CHANGED, processEvent);
//setup the contenier
player.setContainer(video_element, subtitle_element);
//
player.init(true);

When it is all done, it should look similar to this:

<!doctype html>
<html>
    <head>
        <title>WMC-SDK Rocks</title>
        <script src="your-path-to-wmc-sdk/wmc.prod.js"></script>
        <script src="sample-player-wrapper.js"></script>
    </head>
    <body>
        <div>
            <video id="video_element" poster="data/poster.svg" crossOrigin></video>
            <div id="subtitle_element"></div>
        </div>
    </body>
</html>

Details Documents

Tutorials

Topic	Reference Link
How to play LIVE asset (play, pause, seek, restart, stop)	LINK
How to play VOD asset (play, pause, seek, restart, stop)	LINK
How to play CatchUp asset (play, pause, seek, restart, stop)	LINK
How to play LIVE asset (play, pause, seek, restart, stop)	LINK

License

wmc-sdk is released under BSD license

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago