This tutorial explains how to integrate CDN Mesh Delivery with Brightcove.
Note that our plugin has been specifically built to work with the Brightcove Video Cloud Platform.
Not into tutorials? |
Step 1: Add Streamroot plugins
Include these sources in the JavaScript input under the Plugins section of 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.jsStreamroot plugin
To load CDN Mesh Delivery with Brightcove player:
//cdn.streamroot.io/brightcove-hls-dna-plugin/1/stable/brightcove-hls-dna-plugin.js
Step 2: Add Streamroot options
Add the following Name and Options:
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.). |
| hlsjsConfig | No |
The object in which you can change hls.js options. More information can be found hereunder. |
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 was correctly configured, please install our Mesh Delivery Graphs. |
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.
Optional: Show quality selector
Include these sources in the JavaScript input under the Plugins section of your Brightcove player:
Streamroot switcher plugin
//cdn.streamroot.io/videojs-quality-picker/1/stable/vjs-quality-picker.js
Add the following Name (No Options needed):
qualityPickerPlugin
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.
To get the best performance with live content, we recommend setting the following values:
streamrootHls{
"hlsjsConfig": {
"maxBufferSize": 0,
"maxBufferLength": 30,
"liveSyncDuration": 30,
"liveMaxLatencyDuration": Infinity
}
}
Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.
If nothing is specified in the
streamrootHls JSON, Brightcove will delete it from the Options. This will not affect how the plugin works.