HTML5 SDK Integration Document
This guide is for integrating the MediaMelon Player SDK for the javascript based HTML5 Player Web
Step 1: Add the MediaMelonPlayer SDK
Include the following line in the web page at the start
<script type="text/javascript" src="https://sdk.mediamelon.com/SDK_RELEASES/Javascript/html/1.2.1/mmsmartstreaming_htmlplayer.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:
<!DOCTYPE html>
<html>
<head>
<title>MP4 video file</title>
<script src="./mmsmartstreaming_htmlplayer.min.js"></script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" height="300" width="600" autoplay controls>
<source src="https://refapp.hbbtv.org/videos/test/test1_30s.mp4" type="video/mp4">
</video>
<script>
var Videop = document.getElementById("video");
let html5Plugin = new Html5MMSSIntgr();
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",
"videoType": "VIDEO_TYPE",
"customTags": {
"key1": "VALUE_STRING1",
"key2": "VALUE_STRING2"
}
};
if (html5Plugin.getRegistrationStatus() === false) {
html5Plugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE", "SUBSCRIBER_TAG");
html5Plugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
}
html5Plugin.reportAppInfo("APP_NAME", "APP_VERSION");
html5Plugin.setDeviceInfo("DEVICE_MARKETING_NAME");
html5Plugin.reportExperimentName("EXPERIMENT_NAME");
html5Plugin.reportSubPropertyId("SUB_PROPERTY_ID");
html5Plugin.reportBasePlayerInfo("BASE_PLAYER_NAME", "BASE_PLAYER_VERSION");
let mediaUrl = "https://refapp.hbbtv.org/videos/test/test1_30s.mp4";
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.
html5Plugin.reportViewSessionId("VIEW_SESSION_ID");
html5Plugin.initialize(Videop, mediaUrl, mmVideoAssetInfo, isLive);
</script>
</body>
</html>Last updated