HLSJS SDK Integration Document
This guide is for integrating the MediaMelon Player SDK for the javascript based HLSJS Player Web
Step 1: Add the MediaMelon Player SDK
Include the following line in the web page at the start
<script type="text/javascript" src="https://sdk.mediamelon.com/SDK_RELEASES/Javascript/hlsjs/1.2.0/mmsmartstreaming_hlsjsplayer.min.js"></script>Step 2: Register and Initialize the MediaMelon Player SDK
After the player instance has been created, create a new Plugin object, register, report player Info, and then initialize the plugin as shown below:
<html>
<body>
<div>
<video id="videoPlayer" controls></video>
</div>
<script src="./mmsmartstreaming_hlsjsplayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var video = document.getElementById('videoPlayer');
var mmVideoAssetInfo = {
"assetName": "ASSET_NAME",
"assetId": "ASSET_ID",
"videoId": "VIDEO_ID",
"contentType": "CONTENT_TYPE",
"genre": "GENRE",
"drmProtection": "DRM_PROTECTION",
"episodeNumber": "EPISODE_NUMBER",
"season": "SEASON",
"seriesTitle": "SERIES_TITLE",
"customTags": {
"key1": "VALUE_STRING1",
"key2": "VALUE_STRING2"
}
};
//Registering to the MediaMelon plugin
var mmhlsjsPlugin = new HLSJSMMSSIntgr();
if (mmhlsjsPlugin.getRegistrationStatus() === false) {
mmhlsjsPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID",
"SUBSCRIBER_ID",
"DOMAIN_NAME",
"SUBSCRIBER_TYPE",
"SUBSCRIBER_TAG");
mmhlsjsPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION');
}
mmhlsjsPlugin.reportAppInfo("APP_NAME", "APP_VERSION");
mmhlsjsPlugin.setDeviceInfo("DEVICE_MARKETING_NAME");
mmhlsjsPlugin.reportExperimentName("EXPERIMENT_NAME");
mmhlsjsPlugin.reportSubPropertyId("SUB_PROPERTY_ID");
mmhlsjsPlugin.reportBasePlayerInfo("BASE_PLAYER_NAME", "BASE_PLAYER_VERSION");
let mediaURL = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
let isLive = false; //Set this to true for a live stream or false for a VOD stream
// If isLive is not set here, it will be handled internally by the SDK.
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaURL);
hls.attachMedia(video);
mmhlsjsPlugin.reportViewSessionId("VIEW_SESSION_ID");
mmhlsjsPlugin.initialize(hls, mediaURL, mmVideoAssetInfo, isLive);
}
</script>
</body>
</html>Last updated