Skip to main content

Bitmovin

Install QUANTEEC for Bitmovin player​

3 steps:

1- Import the QUANTEEC library for Bitmovin player into your webpage:

<script src="https://files.quanteec.com/quanteec/latest/quanteec-bitmovin.min.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 to Bitmovin player right before the creation of the Bitmovin player instance:

var quanteecPlayer = new Quanteec(quanteecConfig, bitmovin); // "bitmovin" is optional for CDN installation, but mandatory for NPM installation or when "window.bitmovin" is not accessible.
let bitmovinPlayer = new bitmovin.player.Player(document.getElementById('videoplayer'), bitmovinConf);

Here is a complete example of the use of QUANTEEC for Bitmovin:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer.js"></script>
        <!-- 1- Import the QUANTEEC plugin -->
        <script src="https://files.quanteec.com/quanteec/latest/quanteec-bitmovin.min.js"></script>
    </head>

    <body>
        <div id="videoplayer"></div>

        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var videoSource = "https://example.com/videoSource.mpd";

                var bitmovinConf = {
                    key: '<your-bitmovin-player-key>',
                };

                var sourceConf = {
                    title: 'QUANTEEC x Bitmovin',
                    dash: videoSource
                }

                // 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 to Bitmovin player right *before* the creation of the Bitmovin player instance
                var quanteecPlayer = new Quanteec(quanteecConfig, bitmovin); // "bitmovin" is optional for CDN installation, but mandatory for NPM installation or when "window.bitmovin" is not accessible.

                let bitmovinPlayer = new bitmovin.player.Player(document.getElementById('videoplayer'), bitmovinConf);
                bitmovinPlayer.load(sourceConf);

            });
        </script>
    </body>
</html>

Alternative installation method with sendHTTPRequest​

By default, Quanteec overrides the "network.sendHttpRequest" configuration of the Bitmovin player. If you want to use your own "sendHttpRequest" configuration (for caching or analytic purposes), you can do it like this:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer.js"></script>
        <!-- 1- Import the QUANTEEC plugin -->
        <script src="https://files.quanteec.com/quanteec/latest/quanteec-bitmovin.min.js"></script>
    </head>

    <body>
        <div id="videoplayer"></div>

        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var videoSource = "https://example.com/videoSource.mpd";

                var bitmovinConf = {
                    key: '<your-bitmovin-player-key>',
                };

                var sourceConf = {
                    title: 'QUANTEEC x Bitmovin',
                    dash: videoSource
                }

                // 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- Create a Quanteec player instance
                var quanteecPlayer = new Quanteec(quanteecConfig);

                // 4- Get the Quanteec "sendHTTPRequest" configuration, and link it with your own in the Bitmovin configuration.
                let quanteecRequest = quanteecPlayer.getSendHTTPRequest();
                bitmovinConf.network = {
                    sendHttpRequest: quanteecRequest
                }
                
                let bitmovinPlayer = new bitmovin.player.Player(document.getElementById('videoplayer'), bitmovinConf);

                // 5- Link the Quanteec player with the Bitmovin player after the creation of the Bitmovin player instance
                quanteecPlayer.setPlayer(bitmovinPlayer);

                bitmovinPlayer.load(sourceConf);
            });
        </script>
    </body>
</html>