Web Players

See more...

castLabs PRESTOplay

This article provides a step-by-step guide on implementing Streamroot DNA™ with castLabs PRESTOplay.

We have built an optimized plugin for castLabs PRESTOplay for web browsers from v5.1.15.

 

Not into tutorials?

     

 

Step 1: Install PRESTOplay and Streamroot build

Include these sources in the HTML <head>:

<!-- PRESTOplay build -->
<script src="clpp.withstyles.min.js"></script>

<!-- Streamroot plugin -->
<script src="clpp_streamroot_hls.plugin.min.js"></script>

 

Step 2: Set up PRESTOplay and Streamroot

Include the following code in the HTML <body>:

<video id="demoplayer" crossOrigin="anonymous" class="video-js vjs-default-skin vjs-big-play-centered"></video>
<script>
  var player = clpp.init('#demoplayer', {
    autoplay: true,
    license: 'YOUR_PRESTOPLAY_LICENSE',
    clpp_streamroot_hls:{
      streamrootKey: 'YOUR_STREAMROOT_KEY',
      dnaConfig: {}
    }
  });

  player.load([{
    type: clpp.statics.types.HLS,
    src: 'YOUR_PLAYLIST_URL'
  }]);
</script>

 

Parameter name Mandatory Description
dnaConfig No

The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).
YOUR_PRESTOPLAY_LICENSE Yes The castLabs PRESTOplay license key.
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 HLS playlist.

 

Step 3: Visualize Streamroot

In order to verify if Streamroot was correctly configured, please install our DNA Graphs.

Related articles

In this article