This article describes in detail how to use CDN Mesh Delivery with JW Player.
We have built optimized plugins for JWPlayer for v7+ and v8+.
JW Player versions 8.2.0, 8.2.1 and 8.2.2 have a critical bug interrupting playback. This bug has been fixed from 8.2.3.
We also work with the single-line embed code with media ID and player ID in the Url. In this case, just include the Streamroot plugin right after the JW player embed code.
Not into tutorials? |
Step 1: Install JW Player and Streamroot build
Include these sources in the HTML <head>:
HLS
<!-- JW Player build -->
<script src="YOUR_JWPLAYER_LIBRARY"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/jwplayer-hls-dna-plugin/1/stable/jwplayer-hls-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>
MPEG-DASH
<!-- JW Player build -->
<script src="YOUR_JWPLAYER_LIBRARY"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/jwplayer-dash-dna-plugin/1/stable/jwplayer-dash-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>
| Parameter name | Mandatory | Description |
|---|---|---|
| YOUR_JWPLAYER_LIBRARY | Yes | The Cloud-hosted Player Library Url you get from your JW dashboard. |
| 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. |
Step 2: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |
Optional: Set up JW Player and Streamroot
Include the following code in the HTML <body>:
HLS (hls.js)
<div id="demoplayer"></div>
<script>
jwplayer('demoplayer').setup({
file : "YOUR_PLAYLIST_URL",
hlsjsConfig: {},
dnaConfig : {}
})
</script>
MPEG-DASH (Shaka Player)
<div id="demoplayer"></div>
<script>
jwplayer('demoplayer').setup({
file : "YOUR_PLAYLIST_URL",
shakaConfig: {},
dnaConfig : {}
})
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| 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 here. |
| shakaConfig | No | The object in which you can change Shaka Player options. More information can be found here. |
| YOUR_PLAYLIST_URL | Yes | Your HLS or MPEG-DASH playlist. |
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:
var hlsjsConfig = {
"maxBufferSize": 0,
"maxBufferLength": 30,
"liveSyncDuration": 30,
"liveMaxLatencyDuration": Infinity
}Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.
Recommended Shaka Player options
Shaka Player as a wide variety of configuration parameters that can be instantiated in playerConfig object for fine-tuning. You can learn more about them in their API Documentation.
For Live stream, defaultPresentationDelaysuggestedPresentationDelay
Known issues
- We currently don't support the JWPlayer way of configuring Google Dynamic Ad Insertion (DAI). We therefore recommend to use Google Official DAI SDK. Please refer to their documentation to learn how to set it (link).
- By default, with Safari (iOS / OSX), JW Player uses the Safari Native Player. This means that HLS playback itself is handled directly by Safari and not by JW Player.
In order for our Delivery Client to work, we instruct JW Player to prioritize HTML5 playback when it is supported. This will have the effect to deactivate Airplay.
In the case you want Airplay to be available, you need to configure our SDK as below:jwplayer.disableNativeSafariPlayback = false;