Skip to main content

Video.js

Install QUANTEEC for Video.js with hls.js plugin​

4 steps:

1- Import the QUANTEEC library for Video.js with hls.js plugin in your webpage:

<script src="https://files.quanteec.com/quanteec/latest/videojs-quanteec-plugin.js"></script>

2- Adjust the QUANTEEC configuration to your quanteecKey and specific options:

var quanteecConfig = { 
    quanteecKey: "<your-quanteec-key>" 
};
info

To create a new QUANTEEC configuration and/or retrieve your default QUANTEEC key, you must first go to the Config page of your panel.

note

A complete description of the possible options of the quanteecConfiguration object can be found here.

warning

In your QUANTEEC configuration, remember to set a different videoID if you have different formats of the same stream (e.g., one DASH stream and one HLS stream) or two variants of the same stream (one stream with English audio and one stream with another language).

Click here to find more informations on videoID

3- Link QUANTEEC configuration object to Video.js right before the setup of the Video.js player instance:

var vjsObject = { 
  html5: { 
    quanteec: quanteecConfig 
  } 
}
var player = videojs('videoplayer', vjsObject);

4- Register the QUANTEEC plugin in Video.js:

quanteecSourceHandler.register();

Here is a complete example of the use of QUANTEEC for Video.js with hls.js plugin:


<!DOCTYPE html>
<html>
    <head>
        <link href="https://vjs.zencdn.net/8.17.4/video-js.css" rel="stylesheet" />

        <script src="https://vjs.zencdn.net/8.17.4/video.min.js"></script>
        <!-- 1- Import QUANTEEC plugin for Video.js -->
        <script src="https://files.quanteec.com/quanteec/latest/videojs-quanteec-plugin.js"></script>
    </head>
    <body>
        <video id="videoplayer" class="video-js vjs-default-skin" controls></video>

        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var videoSource = "https://example.com/videoSource.m3u8";
                
                // 2- Adjust QUANTEEC configuration
                var quanteecConfig = {
                    quanteecKey: "<your-quanteec-key>",
                    videoID: "<enter-your-custom-videoID>" // [Optional but recommended] String --> specific name to identify a video. Useful if the videosource url contains a token which is different for every user. By default: the videoSource value is used.
                };
                
                // 3- Link QUANTEEC configuration to Video.js object *before* the creation of the Video.js player instance
                var vjsObject = {
                    html5: { 
                        quanteec: quanteecConfig
                    }
                }

                // 4-Register the QUANTEEC plugin in Video.js
                quanteecSourceHandler.register();

                var player = videojs('videoplayer', vjsObject);

                player.src([
                    {
                        src: videoSource,
                        type: 'application/x-mpegurl'
                    }
                ])     


                player.ready(function () {
                    player.play();
                })
                
            });
        </script>
    </body>
</html>

Install QUANTEEC for Video.js with videojs-http-streaming (vhs)​

3 steps:

1- Import the QUANTEEC library for Video.js with videojs-http-streaming in your webpage:

<script src="https://files.quanteec.com/quanteec/latest/quanteec-vhs.min.js"></script>

2- Adjust the QUANTEEC configuration to your quanteecKey and specific options:

var quanteecConfig = { 
    quanteecKey: "<your-quanteec-key>" 
};
note

A complete description of the possible options of the quanteecConfiguration object can be found here.

3- Link QUANTEEC to Video.js right before the setup of the Video.js player instance:

var player = videojs('videoplayer', vjsObject);
var quanteecPlayer = new Quanteec(quanteecConfig, player);

Here is a complete example of the use of QUANTEEC for Video.js with videojs-http-streaming (vhs):


<html>
  <head>
      <link href="https://vjs.zencdn.net/8.17.4/video-js.css" rel="stylesheet" />

      <script src="https://vjs.zencdn.net/8.17.4/video.min.js"></script>
      <!--// 1- Import QUANTEEC plugin for Video.js-->
      <script src="https://files.quanteec.com/quanteec/latest/quanteec-vhs.min.js"></script>
  </head>
  <body>
      <video id="videoplayer" class="video-js vjs-default-skin" controls></video>

      <script>
          document.addEventListener("DOMContentLoaded", function () {
              var videoSource = "https://example.com/videoSource.m3u8";
              
              // 2- Adjust QUANTEEC configuration
              var quanteecConfig = {
                  quanteecKey: "<your-quanteec-key>",
                  videoID: "<enter-your-custom-videoID>" // [Optional but recommended] String --> specific name to identify a video. Useful if the videosource url contains a token which is different for every user. By default: the videoSource value is used.
              };
              
              var vjsObject = {
                  
              }

              var player = videojs('videoplayer', vjsObject);

              // 3- Link QUANTEEC to Video.js right *after* the creation of the player instance, protected by a try catch
                var quanteecPlayer = null;
                try {
                    quanteecPlayer =  new Quanteec(quanteecConfig, player);
                } catch (err) {
                    // If QUANTEEC is not available or an unusual issue occurs
                }

              player.src([
                  {
                      src: videoSource,
                      type: 'application/x-mpegurl'
                  }
              ])     


              player.ready(function () {
                  player.play();
              })
              
          });
      </script>
  </body>
</html>

tip

Good practice: try-catch block​

One good practice is to encapsulate the instantiation of the QUANTEEC object within a try-catch block. This approach provides a robust mechanism for handling situations where QUANTEEC might not be available or may encounter compatibility issues.

Script loading​

Embedding QUANTEEC on a webpage involves loading an external script. If, for any reason, this script fails to load or execute correctly, an error may occur. Wrapping the instantiation of the QUANTEEC object in a try-catch block allows you to catch and handle these errors gracefully.

Unusual environments​

Web environments are diverse, and unusual browsers or plugin associations might cause issues with QUANTEEC. By encapsulating the new Quanteec() operation in a try-catch block, you can account for scenarios where QUANTEEC is either unavailable or incompatible with the current browser, preventing unhandled exceptions.