Bitmovin Web Player

This guide is for integrating the MediaMelon Player SDK for the javascript based Bitmovin Web Player v8

Step 1: Add the MediaMelon Player SDK

To integrate the SmartSight Player SDK with the Bitmovin JS Player. Include the following lines in the html page just before the bitmovinplayer.js script is loaded

<script type="text/javascript" src="path-to/mmsmartstreaming-bitmovin.min.js" ></script>
<script type="text/javascript" src="path-to/bitmovinplayer.js"></script>

This MediaMelon SDK has been verified for Bitmovin Web v8

Step 2: Register and Initialize the MediaMelon Player SDK

Note: <customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at support@mediamelon.com

Create a new plugin object and after the player instance has been created, register it, report player information, and then initialize the Media Melon Player SDK plugin as shown below:

var mmBitmovinPlugin= new BitmovinPlayerMMSSIntgr();
  const config = {
      key: 'Bitmovin_license'
  };

  var container = document.getElementById('my-player');
  var player = new bitmovin.player.Player(container, config);
  
  // Content Meta Data and Custom Tags
  var mmVideoAssetInfo = {
     "assetName":"ASSET_NAME",
     "assetId": "ASSET_ID",
     "videoId": "VIDEO_ID",
     "contentType": "CONTENT_TYPE",
     "drmProtection": "DRM_PROTECTION",
     "episodeNumber": "EPISODE_NUMBER",
     "season":"SEASON",
     "seriesTitle": "SERIES_TITLE",
     "customTags":{
         "key1": "VALUE1",
         "key2": "VALUE2",
         "key3": "VALUE3"
         }
     };
  mmBitmovinPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE" , "SUBSCRIBER_TAG");
  mmBitmovinPlugin.reportPlayerInfo("PLAYE_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
  mmBitmovinAdapter.reportAppInfo("APP_NAME", "APP_VERSION");
  
  var 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.
  mmBitmovinPlugin.initialize(player, "STREAM_URL", mmVideoAssetInfo, isLive);

Step 3: Report Player load error

Notify Bitmovin load failure using reportPlayerError as shown below:

player.load(source).then(function () {
     // Success
  },function (reason) {
      // Error!
      mmBitmovinPlugin.reportPlayerError(reason, source);
  });

Step 4: 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

Note

  • This API must be called for updating asset info for the live streams only

  • This API must be called after the Player has started the playback of the live stream

  • New Asset Info Object will override the previous values, Hence set all the fields that are required every time calling this API

// Create a new assetInfo object with the values need to be updated
var newAssetInfo =  { 
     "assetName":"ASSET_NAME",
     "assetId": "ASSET_ID",
     "videoId": "VIDEO_ID",
     "contentType": "CONTENT_TYPE",
     "drmProtection": "DRM_PROTECTION",
     "episodeNumber": "EPISODE_NUMBER",
     "season":"SEASON",
     "seriesTitle": "SERIES_TITLE",
     "customTags":{
         "key1": "VALUE1",
         "key2": "VALUE2",
         "key3": "VALUE3"
     }          
}
// Update the new assetInfo
mmBitmovinPlugin.updateAssetInfo(newAssetInfo);

Step 5: Set Content Provider Details

Set the required content provider details via an URL. This URL should contain all the details like id's, token information and provider information. This step is required only to generate starz and toolbox events.

mmBitmovinAdapter.setContentProviderDetails(url);
PreviousComcast PDK 6NextHTML5 Player Web

Last updated