Menu

Lumen help

Integrating Mesh Delivery with JW Player

Introduction

Mesh Delivery for Streaming can be integrated into your website with JW Player in just a few simple steps.

 

We have built optimized plugins for JW Player for v7+ and v8+.

 

The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate Mesh Delivery for streaming with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Not into tutorials?  

Code Example

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 Mesh Delivery plugin right after the JW player embed code.

Step 1: Install JW Player and Mesh Delivery builds

Include these sources in the HTML <head>:

                <!-- JW Player build -->
<script src="YOUR_JWPLAYER_LIBRARY"></script>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/jwplayer-hls-dna-plugin/1/stable/jwplayer-hls-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script> 

            
                <!-- JW Player build -->
<script src="YOUR_JWPLAYER_LIBRARY"></script>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/jwplayer-dash-dna-plugin/1/stable/jwplayer-dash-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script>

To get the highest flexibility of deployment, we recommend setting the StreamrootKey in the Query Parameter "srKey".

 

Parameter name

Mandatory

Description
YOUR_JWPLAYER_LIBRARY

Yes      

The cloud-hosted Player Library URL 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 Mesh Delivery

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Vizualization graph for Mesh Delivery

Optional: Set up JW Player and Mesh Delivery

Include the following code in the HTML <body> :

                <div id="demoplayer"></div>
<script>
  jwplayer('demoplayer').setup({
    file : "YOUR_PLAYLIST_URL",
    hlsjsConfig: {},
    dnaConfig : {}
  })
</script>

            
                <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 Mesh Delivery options (property, contentIdGenerator, id, etc.).
hlsjsConfig
 No
 The object in which you can change hls.js options. More information is listed under "Recommended Hls.js options".
shakaConfig
 No
 The object in which you can change shaka player options. More information is listed under "Recommended Shaka Player options"

YOUR_PLAYLIST_URL

Yes

Your playlist.

Recommended Hls.js options

hls.js has a variety of configuration parameters that can be instantiated in hlsjsConfig object for fine-tuning. You can learn more about them in their API Documentation. For optimal performance with live content, we recommend the following values:

                var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30,
   "liveSyncDuration": 30,
   "liveMaxLatencyDuration": Infinity
}

liveSyncDuration and liveMaxLatencyDuration are not needed for VOD streams.  

Recommended Shaka Player options

Shaka Player provides a variety of configuration parameters that can be set in the playerConfig object for fine-tuning. You can learn more in Shaka’s API Documentation.

 

For optimal performance, we recommend setting the following values:

                var playerConfig = {
    streaming: {
        bufferingGoal: 30,
        useNativeHlsOnSafari: false,
    },
    manifest: {
        defaultPresentationDelay: 30,
    },
}

For live streams, defaultPresentationDelay should be set as shown above or directly in your manifest in suggestedPresentationDelay.

And in just a few easy steps you should have a working integration of Mesh Delivery! We encourage you to explore our documentation to understand the various features we offer so you can make the most out of our product.

Known Issues

  • We currently don't support how JW Player configures Google Dynamic Ad Insertion (DAI). We therefore recommend using Google’s official DAI SDK. Please refer to their documentation to learn how to set it.

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

  • 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.
    If you want Airplay to be available, configure our SDK as below:
                jwplayer.disableNativeSafariPlayback = false;