Bitmovin Web (Nowtilus SSAI)
Step 1: Add MediaMelon SDK
Integrate the MediaMelon SmartStreaming SDK with the Bitmovin JS Player. Include the following line to the web page before bitmovinplayer.js is loaded
<script type="text/javascript" src="path-to/mmsmartstreaming-bitmovin-ssai.js" ></script>
<script type="text/javascript" src="path-to/bitmovinplayer.js"></script>Step 2: Register and Initialize MediaMelon SDK
Note: <customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [email protected]
Create a new plugin object and after the player instance has been created, register it, report player information, and then initialize the SmartSight plugin as shown below:
var MMBitmovinPlugin= new BitmovinPlayerMMSSIntgr();
const config = {
key: 'Bitmovin_license',
adaptation: {
desktop: {
onVideoAdaptation: MMBitmovinPlugin.onVideoAdaptationMediaMelon,
},
mobile: {
onVideoAdaptation: MMBitmovinPlugin.onVideoAdaptationMediaMelon,
},
}
};
var container = document.getElementById('my-player');
var player = new bitmovin.player.Player(container, config);
MMBitmovinPlugin.registerMMSmartStreaming(<player_name>, <customer_id>, <subscriber_id>, <domain_name>, <subscriber_type> , <subscriber_tag>);
MMBitmovinPlugin.reportPlayerInfo(<player_brand>, <player_model>, <player_version>);
MMBitmovinPlugin.initialize(player); // Please do not initialize if you want to use Ad events, Please follow intialize player in Step 5Please do not initialize the MediaMelon SDK right now if you are going to subscribe to Ad Events
Step 3: Report Player load error
Notify Bitmovin load failure using reportPlayerError api as shown below:
player.load(source).then(function () {
// Success
},function (reason) {
// Error!
MMBitmovinPlugin.reportPlayerError(reason, source);
});Step 4: Providing Content Metadata and Custom Tags
You can also provide the Content Metadata and Custom Tags as shown below in html/js while setting source information. Please use the mmVideoAssetInfo structure to provide this information.
var source = {
dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',
mmVideoAssetInfo: {
"assetName":"ASSETNAME_STRING/Episode Name",
"assetId": "ASSETID_STRING",
"videoId": "VIDEOID_STRING",
"contentType": "Genre of the content (episode, movies, etc)",
"drmProtection": "DRM type used (Widevine, Playready, etc)",
"episodeNumber": "Episode Number, e.g., 2 or E2",
"season":"Season number of the Series Title, e.g, 2 or S2",
"seriesTitle": "Series Title",
"customTags":{
"key1": "VALUE_STRING1",
"key2": "VALUE_STRING2",
"key3": "VALUE_STRING3"
}
}
};Step 5: Registering for Ad events for disabling Player controls
var NowtilusAdPlugin =new mmNowtilusSSAIPlugin(player)
NowtilusAdPlugin.addListener('start', function(adinfo){
console.log("AD start");
//** Application to Disable Player Controls here **
});
NowtilusAdPlugin.addListener('complete', function(adinfo){
console.log("AD complete");
//** Application to Enable Player Controls here **
});
MMBitmovinPlugin.initialize(player,undefined,NowtilusAdPlugin);Step 6: Update Asset Info
If Asset Information needs to be updated dynamically during the live session without re-initiating the player, then the updateAssetInfo API can be used to update the new AssetInfo
// Create a new assetInfo object with the values need to be updated
var newAssetInfo = {
"assetName":"ASSETNAME_STRING/Episode Name",
"assetId": "ASSETID_STRING",
"videoId": "VIDEOID_STRING",
"contentType": "Genre of the content (episode, movies, etc)",
"drmProtection": "DRM type used (Widevine, Playready, etc)",
"episodeNumber": "Episode Number, e.g., 2 or E2",
"season":"Season number of the Series Title, e.g, 2 or S2",
"seriesTitle": "Series Title",
"customTags":{
"key1": "VALUE_STRING1",
"key2": "VALUE_STRING2",
"key3": "VALUE_STRING3"
}
}
// Update the new assetInfo
Last updated
Was this helpful?