Adding the PolyNet HTML5 SDK with VideoJS

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 VideoJS/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: VideoJS dependencies should be always called BEFORE the System73 PolyNet dependencies.

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

NOTE: Keep in mind to do NOT add data-setup as attribute into the video tag as it is specified in the VideoJS documentation

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

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

    <!-- VideoJS 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-videojs-hlsjs.min.js" type="application/javascript"></script>
  </head>
  <body>
    <video id="video" class="video-js" controls></video>

    <script>
      var options = {
        // Add your custom player configuration here
        html5: {
          hlsjsConfig: {
          },
          polyNetConfig: {
             apiKey: '<YOUR_API_KEY>', // mandatory
             channelId: '<CHANNEL_ID>' // optional
          }
        }
      }

      var player = videojs("video", options);
      player.ready(function() {
        player.src({
          src: '<MANIFEST_URL>',
          type: 'application/vnd.apple.mpegURL'
        });
      });
    </script>
  </body>
</html>

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

Contact us in order to obtain an API key.


Other considerations [Optional]

Quality Selector

To add quality picker menus to VideoJS which allows users to perform manual quality selection for multi-bitrate video, or multi-language audio / subtitles you must initialize the plugin after initializing VideoJS:

       var player = videojs("video", options);
       player.ready(function() {
         player.src({
           src: '<MANIFEST_URL>',
           type: 'application/vnd.apple.mpegURL'
         });
       });

       player.qualityPickerPlugin();

Custom hls.js configuration

If you are customizing the hls.js configuration, please read the Custom configuration section before.

Listening to hls.js events

If, for some reason, you need access to events from the hls.js instance (i.e. for getting ID3 tags), VideoJS lets you subscribe to the tech to get events:

var player = videojs('video');
player.tech_.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    // do something with parsed ID3 metadata
});

The full list of hls.js events can be found here.

NOTE hls.js global is exposed to window.Hls.