Skip to content

HTML5 SDK Players

Shaka

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 Oour SDK and the Shaka Player 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

Shaka Player dependencies should be called always BEFORE the System73's SDK dependencies.

Shaka Player and System73's SDK dependencies should be called always BEFORE the <video> tag.

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

      <!-- Shaka Player dependency -->
      <!-- Shaka Player should always be called BEFORE the System73 PolyNet dependencies -->
      <script src="//cdn.jsdelivr.net/npm/shaka-player@3.1.1/dist/shaka-player.compiled.min.js" type="application/javascript"></script>

      <!-- System73 PolyNet dependencies -->
      <!-- Shaka Player and System73 PolyNet dependencies should always be 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-shakaplayer.min.js" type="application/javascript"></script>
  </head>

  <body>
    <video id="video" class="shaka" controls></video>

    <script>
        var playerConfig = {
            // Add your custom player configuration here
        };

        var polyNetConfig = {
            apiKey: '<YOUR_API_KEY>', // mandatory
            mss: '<YOUR_MSS_API_KEY>', // optional
            channelId: '<CHANNEL_ID>' // optional
        };

        var source = '<MANIFEST_URL>';

        shaka.polyfill.installAll();

        if (!shaka.Player.isBrowserSupported()) {
            console.error('Browser not supported!');
        } else {
            // PolyNet Shaka Player plugin initialization
            var wrapper = PolyNetShakaPlayerWrapper(polyNetConfig, {shaka});
            wrapper.extendPlayerConfig(playerConfig);

            // Player creation
            var video = document.getElementById('video');
            var player = new shaka.Player(video);
            player.configure(playerConfig);

            // player wrapping
            wrapper.wrap(player);

            player.load(source)
                .then(function() {
                    console.log('The video has now been loaded!');
                })
                .catch(function(error) {
                    console.error('Error code', error.code, 'object', error);
                });
        }
    </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.