JW Player

Note
This support website will be decommissioned on 16th December 2022.
For up-to-date information, please refer to documentation on Lumen.com.

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+.

⚠️ Important
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.

Note
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, defaultPresentationDelay should be set as shown above or directly in your manifest in suggestedPresentationDelay.

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;
```

Players