HTML5 SDK Players¶

Shaka¶

In order to download the resources needed to use the System73 SDK, the following asset is provided from our CDN:

https://cdn.s73cloud.com/4/s73-sdk-shakaplayer.js

The following HTML5 code snippet shows how to include the System73 SDK for Shaka Player 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 SDK Shaka Player integration</title>

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

      <!-- Shaka Player and System73 SDK dependencies should always be called BEFORE the video tag. -->
      <script src="//cdn.s73cloud.com/4/s73-sdk-shakaplayer.js" type="application/javascript"></script>
  </head>

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

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

        var s73SdkConfig = {
            apiKey: '<YOUR_API_KEY>', // mandatory
            contentSteering: '<YOUR_CONTENT_STEERING_RESOURCE>', // optional
            channelId: '<CHANNEL_ID>' // optional
        };

        var source = '<MANIFEST_URL>';

        shaka.polyfill.installAll();

        if (!shaka.Player.isBrowserSupported()) {
            console.error('Browser not supported!');
        } else {
            // System73 SDK Shaka Player wrapper initialization
            var wrapper = S73ShakaPlayerWrapper(s73SdkConfig, {shaka});
            wrapper.wrapPlayerConfig(playerConfig);

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

            // player wrapping
            wrapper.wrapPlayer(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_CONTENT_STEERING_RESOURCE: is an optional value, and it is used as the content steering resource URI.
(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.

This section was last updated 2024-03-14