This article describes the CDN Mesh Delivery integration with Rx-player, a Smooth Streaming and DASH open-source HTML5 video player developed and maintained by Canal Plus.
We have built optimized plugins for Rx-player from v3.0.
Step 1: Install Rx-player and Streamroot build
Using the pre-build script
Include these sources in the HTML <head>:
<!-- Rx-player build -->
<script src="//cdn.jsdelivr.net/npm/rx-player@3.10.3/dist/rx-player.min.js"></script>
<!-- Streamroot wrapper -->
<script src="//cdn.streamroot.io/rxplayer-dna-wrapper/1/stable/rxplayer-dna-wrapper.js"></script>Using npm
Install runtime and dev dependencies:
npm install @streamroot/rxplayer-dna-wrapperIn your application, import/require the package you want to use similar to this example:
import RxplayerDnaWrapper from '@streamroot/rxplayer-dna-wrapper';
Step 2: Set up Rx-player and Streamroot
In the HTML <body> or with npm
<video id="demoplayer"></video>
<script>
var dnaConfig = {};
var video = document.getElementById('demoplayer');
player = new RxPlayer({ videoElement: video });
// Initialize the wrapper BEFORE calling player.loadVideo!
wrapper = new RxplayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
player.loadVideo({
url: "YOUR_PLAYLIST_URL",
transport: "smooth|dash",
startAt: {
fromLastPosition: -30, // It's essential to setup reasonable liveEdge latency for good DNA on live streams
},
});
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| 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. |
| YOUR_PLAYLIST_URL | Yes | Your Smooth or DASH playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |