How can I add additional headers / query parameters to requests issued by the player?

I am trying to send custom header when requesting to play a video from a server using Bitmovin player. Below is my code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEST</title>
  <meta charset="UTF-8"/>
 
  <!-- bitdash player -->
  <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7.5/bitmovinplayer.js"></script>

  
</head>
<body background="http://bitmovin-a.akamaihd.net/webpages/bitmovin/images/background.jpg">
<div class="container">
  <h1>HTML5 Adaptive Streaming Player for MPEG-DASH & HLS</h1>
  <h2>Your videos play everywhere with low startup delay, no buffering and in highest quality.</h2>
  <div id="webserver-warning">
    <div class="ca-content">
      <h1>Unsupported Protocol</h1>
      <h2>This file has been loaded using the unsupported "file" protocol. Please use a <a href="http://wiki.selfhtml.org/wiki/Webserver/lokal" target="_blank">web server</a> and open this page using http or https.</h2>
    </div>
  </div>
  <div class="content">
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
    <div class="description">
      <p>For more information about the bitmovin player, please have a look at our online <a href="//bitmovin.com/support" target="_blank">Developer Section</a>.</p>
    </div>
  </div>

</div>
<div id="player"></div>
<script type="text/javascript">
    var conf = {
        key:       "b9c7c8b6-4af5-453e-8020-0a79672c6d5a",
        source: {
          hls:         "//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
        }
        network: {
            //Adding a custom header to each manifest request
            preprocessHttpRequest: function (type, request) {
                if (type === bitmovin.player.network.REQUEST_TYPE.MANIFEST_DASH) {
                    request.method = 'GET';
                    request.headers.push({
                        name: 'User-Agent',
                        value: 'Mozilla/5.0 (Windows NT 6.1; WOW64)'
                    });
                    return Promise.resolve(request);
                }
            }
        }
    };
    var player = bitmovin.player("player");
    player.setup(conf).then(function(value) {
        // Success
        console.log("Successfully created bitmovin player instance");
    }, function(reason) {
        // Error!
        console.log("Error while creating bitmovin player instance");
    });
</script>
</body>
</html>

But the player is not loading . Whats wrong ? And how to pass header correctly ? or suggest any player which can send custom header during request to video server

Solution

Hi shubham,

your example has a syntax error in the player configuration. A comma "," after the source configuration is missing. Therefore, the Javascript execution fails and the player won't load as expected.

Further, you were using an HLS source, but you checked for an MPD-URL in your preprocessHttpRequest callback function, therefore it would have been was never executed. Please see the player API reference which states all available request types

Be aware, that adding a custom header to an XHR request causes an preflight request, which requires that the recipient does allow this particular header in its access-control-allow-headers setting of its CORS configuration. Otherwise, the preflight request will fail and you won't be able to play the content. More details about this topic can be found here

I prepared an example, which shows how it could look like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7.5/bitmovinplayer.js"></script>
</head>

<body>
<div id="player"></div>
<script type="text/javascript">
    var player = bitmovin.player("player");

    var conf = {
        key: "YOUR_PLAYER_LICENSE_KEY_HERE",
        source: {
            dash: "http://vm2.dashif.org/livesim-dev/periods_1/testpic_2s/Manifest.mpd",
            title: "Bitmovin Player " + bitmovin.player.version,
            description: "This is a configuration example, which shows how you can add query parameters using the network API",
        },
        network: {
            preprocessHttpRequest: function (requestType, requestConfig) {
                //Please see https://developer.bitmovin.com/hc/en-us/articles/115001561533#enums/playerconfigapi.httprequesttype.html for all available request types
                if (requestType === bitmovin.player.network.REQUEST_TYPE.MANIFEST_DASH) {
                    console.log("request Type: ", requestType);
                    console.log("request Config: ", requestConfig);

                    //Adding a custom header to the manifest request
                    //requestConfig.headers.push({name: "your-customer-header-name", value: "your-custom-header-value"});

                    //Adding a customm query parameter to the manifest request
                    //requestConfig.url = requestConfig.url + "?yourcustom=queryparam";

                    return requestConfig;
                }
            }
        }
    };

    player.setup(conf).then(function (playerInstance) {
        console.log("Successfully created Bitmovin player instance", playerInstance);
    }, function (reason) {
        console.log("Error while creating Bitmovin player instance", reason);
    });

</script>
</body>
</html>