Web Players

See more

mpx Player

This tutorial explains step by step how to use Streamroot DNA™ with Mpx Platform, the video management system offered by Comcast Technology Solutions.

We have built optimized plugins for the mpx player PDK 5.

 

Not into tutorials?

     
Note
This plugin has been specially built to work with the Mpx Platform. It currently supports HLS and MPEG-DASH Live and VoD streams.

 

Streamroot plugin can be added directly from Comcast's Mpx console.

Step 1: Add Streamroot plugin as a custom script file

In the Mpx console, go to the PLAYERS section >> Advanced Settings.

Copy/paste the Streamroot plugin URL in the "Custom script files" input.

HLS

https://cdn.streamroot.io/mpx-hls-dna-plugin/1/stable/mpx-hls-dna-plugin.js

 

MPEG-DASH

https://cdn.streamroot.io/mpx-dash-dna-plugin/1/stable/mpx-dash-dna-plugin.js

 

Step 2: Add Streamroot options as a custom script 

Declare Streamroot options in a streamrootDna JSON and copy/paste it in the "Custom script" input:

var streamrootDna = {
  "streamrootKey": "YOUR_STREAMROOT_KEY",
  "dnaConfig": {}
} 

 

Parameter name Mandatory Description
YOUR_STREAMROOT_KEY Yes

The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard.
dnaConfig No

The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).

 Then click on Save.

 mpx.png

Step 3: Visualize DNA stats in your console

To display basic DNA stats in your browser console, copy/paste the following snippet in the "Custom script" input of your player:

!function(){function n(){if(Streamroot.instances.length){var n=Streamroot.instances[0].stats,t=n.allContents.dnaDownload?n.allContents.dnaDownload/(n.allContents.dnaDownload+n.allContents.cdnDownload)*100:0,a={upload:o(n.allContents.dnaUpload),dna:o(n.allContents.dnaDownload),cdn:o(n.allContents.cdnDownload),efficiency:`${t}%`,peers:n.realtime.dnaSources};console.table(a)}else console.warn("Streamrooot not initialized")}function o(n,o=10){if(0===n)return"0B";var t=o+1||1,a=Math.floor(Math.log(n)/Math.log(1e3));return parseFloat((n/1e3**a).toFixed(t))+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][a]}setInterval(()=>{n()},1e4),n()}();

 

You should have the following table, which is updated every 10 seconds:

  

Recommended hls.js options

hls.js has a wide variety of configuration parameters that can be instantiated in hlsjsConfig object for fine-tuning. You can learn more about them in their API Documentation.

You can change the Hls.js options by passing a hlsjsConfig JSON in the "Custom script" input.

To get the best performance with live content, we recommend setting the following values:

var hlsjsConfig = {
        "maxBufferSize": 0,
        "maxBufferLength": 30,
        "liveSyncDuration": 30
    }

 

Otherwise, liveSyncDuration is not needed for VoD streams.

Related articles