Articles in this section

See more

Brightcove

Not into tutorials?

     

Note
This plugin has been specially built to work with the Brightcove Video Cloud Platform.

 

Step 1: Add Streamroot plugins

Include this sources in the JavaScript input under the Plugins section in your Brightcove player.

Streamroot HLS source handler plugin
To add HLS playback support to Brightcove.

//cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js

Streamroot plugin
To load Streamroot DNA with Brightcove player.

//cdn.streamroot.io/brightcove-hls-dna-plugin/1/stable/brightcove-hls-dna-plugin.js

brightcove_plugins.png
 

Step 2: Add Streamroot options

Add the following Name and Options:

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

brightcove_options.png

 

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 ...).
hlsjsConfig No

The object in which you can change hls.js options. More information can be found hereunder.

 

Note
If nothing is specified in the dnaConfig object, Brightcove will delete it from the Options. This will not affect how the plugin works.

After publishing the player, changes take about 10 minutes to be applied.

 

Step 3: Visualize Streamroot

 

In order to verify if Streamroot is correctly configurated, please install our DNA Graphs.

 

Note
To use Streamroot Graph, you need to Publish your player using the Advanced embed code. Using the standard (iframe) embed code will prevent from loading the Graph.

 

Recommended hls.js options

hls.js as 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.

To get the best performances with live contents, we recommend setting the following values:

streamrootHls
{
    "hlsjsConfig": {
        "maxBufferSize": 0,
        "maxBufferLength": 30,
        "liveSyncDuration": 30
    }
}

brightcove_hls_options.png

 

Otherwise, liveSyncDuration is not needed for VoD streams.

Note
If nothing is specified in the streamrootHls JSON, Brightcove will delete it from the Options. This will not affect how the plugin works.

Related articles