Skip to content

HTML5 SDK Players

hls.js

Downloads

In order to download the resources needed to connect to the System73 SDK's overlay, the following assets are provided from System73's CDN servers:


The following HTML5 code snippet shows how to include Our SDK and the hls.js plugin in addition to the player scripts. The needed configuration for your application and player may differ from this. Please check the player's official documentation for any further details.

Notes

hls.js dependencies should be called always BEFORE the System73's SDK Service dependencies.

hls.js and System73 PolyNet dependencies should be always called BEFORE the video tag.

System73's hls.js plugin must be instantiated always BEFORE the hls.js loadSource call.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>System73 PolyNet</title>

    <!-- hls.js should be always called BEFORE the System73 PolyNet dependencies -->
    <script src="//cdn.jsdelivr.net/npm/hls.js@0.14" type="application/javascript"></script>

    <!-- hls.js and System73 PolyNet dependencies should be always called BEFORE the video tag. -->
    <script src="//cdn.s73cloud.com/3/s73-polynet-sdk-video.min.js" type="application/javascript"></script>
    <script src="//cdn.s73cloud.com/3/s73-polynet-plugin-hlsjs.min.js" type="application/javascript"></script> 


  </head>
  <body>
    <video id="video"></video>

    <script>
      var video = document.getElementById('video');
      if(Hls.isSupported()) {
          var hls = new Hls();
          var polyNetConfig = {
            apiKey: '<YOUR_API_KEY>', // mandatory
            mss: '<YOUR_MSS_API_KEY>', // optional
            channelId: '<CHANNEL_ID>' // optional
          };
          var playerConfig = {
            // Add your custom player configuration here
            polyNetConfig: polyNetConfig,
            videoElement: video,
            hlsjs: hls
          };

          new PolyNetPluginHlsjs(playerConfig);
          hls.loadSource('<MANIFEST_URL>');
          hls.attachMedia(video);
      }
      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
      // This is using the built-in support of the plain video element, without using hls.js.
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = '<MANIFEST_URL>';
      }
    </script>
  </body>
</html>

The following parameters are used when performing an integration with System73's SDK:

  • (String)YOUR_API_KEY: is a required value, and it is used as the authentication key to access to the System73 SDK network.
  • (String)YOUR_MSS_API_KEY: is an optional value, and it is used as the authentication key to get midstream switching.
  • (String)CHANNEL_ID: is an optional value, and it is used as the identifier of the desired System73 SDK's channel.

Contact us in order to obtain it.

Other considerations [Optional]

Custom configuration

You are free to pass hls.js any custom configuration, if you need it.

PolyNet SDK only uses the liveSyncDuration setting:

  • If you set a custom value, PolyNet SDK will use yours.
  • If you don't provide a value, liveSyncDuration will be set to 30, instead of the default.

Tip

liveSyncDuration takes precedence over the setting liveSyncDurationCount. Even if you provide a custom liveSyncDurationCount, hls.js may ignore it and use liveSyncDuration = 30 from the SDK.