Skip to content

HTML5 SDK Players

VideoJS

Downloads

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

The following HTML5 code snippet shows how to include the System73 SDK for Video.js 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

VideoJS dependencies should be always called BEFORE the System73 SDK dependencies.

VideoJS and System73 SDK dependencies should be always called BEFORE the <video> tag.

The data-setup attribute in the <video> tag specified in the VideoJS documentation is NOT supported. The reason is the SDK wrapPlayerConfig method needs access to the player options before passing them to VideoJS, as shown in the HTML code snippet below.

The source in the <video> tag is also NOT supported. The reason is the SDK wrapPlayer method needs access to the player instance to set the SDK own source handlers. The preferred way is VideoJS own src method as shown in the HTML code snippet below. VideoJS needs to have the right source handlers before starting to request the stream content.

Third-party source handlers might not be compatible with the SDK. Example: videojs-contrib-dash won't execute when the SDK is in use. If you need DASH support, you should rely on plain VideoJS built-in MPD compatibility (VHS), instead of third-party scripts.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>System73 SDK Video.js Player integration</title>

    <!-- VideoJS should be always called BEFORE the System73 SDK dependencies -->
    <link href="//vjs.zencdn.net/7.11.4/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.11.4/video.min.js" type="application/javascript"></script>

    <!-- VideoJS and System73 SDK dependencies should be always called BEFORE the video tag. -->
    <script src="//cdn.s73cloud.com/4/s73-sdk-videojs.js" type="application/javascript"></script>
  </head>
  <body>
    <video id="video" class="video-js" controls autoplay muted></video>

    <script>
      var s73SdkConfig = {
        apiKey: '<YOUR_API_KEY>', // mandatory
        contentSteeringEndpoint: '<YOUR_CONTENT_STEERING_RESOURCE>', // optional
        channelId: '<CHANNEL_ID>' // optional
      };
      var playerConfig = {
        // Add your custom player configuration here
      };

      var wrapper = S73VideojsWrapper(s73SdkConfig);

      wrapper.wrapPlayerConfig(playerConfig);

      var player = videojs("video", playerConfig);

      wrapper.wrapPlayer(player);

      player.ready(function() {
        player.src({
          src: '<MANIFEST_URL>', // <-- Valid M3U8 or MPD manifest

          type: 'application/vnd.apple.mpegURL' // <-- For HLS (any valid MIME type for M3U8)
          // - or -
          // type: 'application/dash+xml' // <-- For DASH
        });
      });

    </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 2025-04-25