Tutorial: Playback of MK Encrypted Assets

Playback of MK Encrypted Assets

Initial Html Layout

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="poster.svg" controls></video>
    <div id="subtitle_element"></div>
</div>

Include wmc.prod.js to the end of the head tag.

<head>
    ...
    <script src="node_modules/@mediakind/wmc/dist/wmc.prod.js"></script>
</head>

Initialize WMC-SDK by creating the media player

N.B. - For brevity, we assume that the data required to start the playback is stored in a config object, as shown in Home.
// Creating the AmcManager instance from amc module
wmcMgr = new amc.AmcManager(config.serverUrl, config.ownerUid, config.primaryId);
var wmcEvents = amc.AmcEvents;
var wmcConstants = amc.AmcConstants;
// Setup the logger level to DEBUG
wmcMgr.setLogLevel(wmcConstants.IMC_LOG_DEBUG);

Define Video and Subtitle HTML-DOM elements

var video = document.getElementById("video_element");
var subtitle = document.getElementById("subtitle_element");

Register the basic playback events

wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);

Processing the Events

function processEvent(eventObj) {
    switch (eventObj.eventType) {
        case wmcEvents.AMC_EVENT_PLAY_READY:
            //setup the video and subtitle containers
            wmcMgr.setContainer(video, subtitle);
            // initialize the playback with given parameters to be followed by events AMC_EVENT_DEVICE_REGISTERED (first time) and AMC_EVENT_INIT_COMPLETE ( 2nd time onwards)
            wmcMgr.start();
            break;
        case wmcEvents.AMC_EVENT_DEVICE_REGISTERED:
        case wmcEvents.AMC_EVENT_INIT_COMPLETE:
            // Passing player key and analytics key
            //wmcMgr.setPlayerKey("xxxxxx-xxxxxx-xxxxxxx");
            //wmcMgr.setAnalyticsConfig("xxxxxx-xxxxxx-xxxxxxx", "dummy@abc.com", "LIVE$4346", "Dummy Test Channel");
            // start the VOD/LIVE playback
            wmcMgr.createPlayer(config.playbackMode === "LIVE" ? amc.AmcConstants.IMC_MODE_LIVE : amc.AmcConstants.IMC_MODE_ADAPTIVE, config.mediaId, "", config.appId);
            break;
        case wmcEvents.AMC_EVENT_ERROR:
            console.error(eventObj.code + ":" + ((eventObj.message) ? eventObj.message : eventObj.message.error));
            break;
        default:
    }
}

Set Authorization Token

// Enable MKP Rest API(s)
wmcMgr.enableMKPApi(true);
// Set the AccountId
wmcMgr.setPrimary(config.primaryId);
// Set the authorization token to access the environment
wmcMgr.setSTSToken(config.authToken);

Set Audio / Video buffer

// Set the audio, video buffer value in second
wmcMgr.setBufferLevel({"video":{"forwardDuration":0,"backwardDuration":0},"audio":{"forwardDuration":0,"backwardDuration":0}});

Initialized WmcSdk

// Initializes the WMC SDK, to be followed by event AMC_EVENT_PLAY_READY
wmcMgr.init();

Final HTML Layout

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <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">
    <title>WMC-SDK Player</title>
    <!-- Setting the source for WMC-SDK from npm Private MK Repository -->
    <script src="node_modules/@mediakind/wmc/dist/wmc.prod.js"></script>
</head>

<body>
    <div id="player_container">
        <video style="width: 100%;height: 100%;" controls id="video_element" poster="poster.svg" controls></video>
        <div id="subtitle_element"></div>
    </div>
    <script src="script/main.js"></script>
</body>

</html>