Adding the PolyNet HTML5 SDK with HLS.js

Downloads

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


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

NOTE: HLS.js dependencies should be always called BEFORE the System73 PolyNet dependencies.

NOTE: HLS.js and System73 PolyNet dependencies should be always called BEFORE the video tag.

<!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.11.0" type="application/javascript"></script>

    <!-- Hls.js and System73 PolyNet dependencies should be always called BEFORE the video tag. -->
    <script src="//cdn.s73cloud.com/3.0/s73-polynet-sdk-video.min.js" type="application/javascript"></script>
    <script src="//cdn.s73cloud.com/3.0/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();
          new PolyNetPluginHlsjs({
            polyNetConfig: {
                apiKey: '<YOUR_API_KEY>', // mandatory
                channelId: '<CHANNEL_ID>' // optional
            },
            videoElement: video,
            hlsjs: hls
          });
          hls.loadSource('<MANIFEST_URL>');
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED,function() {
              var playPromise = video.play();

               if (playPromise !== undefined) {
                  playPromise.then(function() {
                    // Automatic playback started!
                  }).catch(function(error) {
                    // Automatic playback failed.
                    // Show a UI element to let the user manually start playback.
                  });
                }
          });
      }
      // 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>';
          video.addEventListener('canplay',function() {
              var playPromise = video.play();

              if (playPromise !== undefined) {
                playPromise.then(function() {
                  // Automatic playback started!
                }).catch(function(error) {
                  // Automatic playback failed.
                  // Show a UI element to let the user manually start playback.
                });
              }
          });
      }
    </script>
  </body>
</html>

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

Contact us in order to obtain it.