Is there a way to include a custom http header in a <video> source call?

Question

I have a simple html5 player, implemented with videoJS. In order to properly retrieve the source files from the server, I need to set a custom header in the request for the video.

Since the application uses AngularJS, I implemented an Interceptor to set the header:

myApp.factory('headerInterceptor', function () {
  return {
    request: function (config) {
        config.headers['my-header'] = 'test';
        return config;
    }
  };
});

myApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('headerInterceptor');
}

Problem with this, is that the call to the video is not catched by it, so no header is set (it is though for other resources). So angular does not load the videos. No big surprise in that. Checking the Network tab in developer tools, found out that videoJS initiates the call:

But finding my way in the videoJS plugin has been difficult, and couln't find where the calls are made. Im just wondering, is there a simple way to set the header for this call? doesn't matter if it's plain javascript, or through angular, or even modifying videoJS plugin.

Answer 1

Inside an Angular run block, you can override the videojs plugin XHR beforeRequest function. YMMV, but if you use HLS plugin for example, you could do something like that:

angular.module('app', []).run(function($localStorage) {

    var _beforeRequest = videojs.Hls.xhr.beforeRequest;
    videojs.Hls.xhr.beforeRequest = function(options) {
        if (_.isFunction(_beforeRequest)) {
            options = _beforeRequest(options);
        }
        if ($localStorage.token) {
            options.headers = options.headers || {};
            options.headers.Authorization = 'Token ' + $localStorage.token;
        }
        return options;
    };
});