This article describes in detail how to use Streamroot DNA™ 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 DNA 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.

Players