How to add custom header in every dash request from videojs

[krackjack234]

Hi,

We want to add a custom header in every request that the player makes while playing a mpd file.

Is there anyway we can add/modify a header in every mpd/mp4/m4v/m4a request that we make from the player (like an interceptor)?

We saw the example present at https://reference.dashif.org/dash.js/v3.1.0/samples/advanced/extend.html

but when we try the same using videojs, we dont see the functions getting called

Here is a code snippet we used

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  player.on('loadstart', function() {
    addCustomHeaderForDash();
  })
 
 
  function addCustomHeaderForDash(){
    if (player.dash && player.dash.mediaPlayer) {
      player.dash.mediaPlayer.extend("RequestModifier", function () {
                  return {
                      modifyRequestHeader: function (xhr) {
                          // Add custom header. Requires to set up Access-Control-Allow-Headers in your
                          // response header in the server side. Reference: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader
                          // xhr.setRequestHeader('DASH-CUSTOM-HEADER', 'MyValue');
                          
                          return xhr;
                      },
                      modifyRequestURL: function (url) {
                          // Modify url adding a custom query string parameter
                          return url + '?customQuery=value';
                      }
                  };
      });
    }
  }

})

Any pointers will be really helpful.
Thanks

[krackjack234]

videojs-dash.html.zip

Test page attached