7

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:

failed source retrieval

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.

ezabaw
  • 625
  • 2
  • 8
  • 21

2 Answers2

6

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;
    };
});
blokfyuh
  • 76
  • 1
  • 5
  • Can you advice how it can be done without HLS plugin? – Javasick Jun 01 '16 at 10:52
  • @D0dger: Which plugin are you using ? I guess that VideoJS plugins use a consistent API so each one should expose a xhr Object with a beforeRequest function. Let me know. – blokfyuh Jun 02 '16 at 14:04
  • It expose xhr, but not using it for video requests (subtitles and posters only), or i didn't get how it is using. For now I added token to request param – Javasick Jun 02 '16 at 14:27
1

I had ran into this issue as well. I wanted to send an authorization header along with every video and image requested to my site and use the native html5 video tag. After searching for a long time, I was not able to find any solution that would allow custom headers. In the end, I decided to create a cookie at the start of the application. Since cookies are sent on every request, I was able to setup my Web API to look for this cookie only when images and videos are requested. That way the rest of the site would continue to use the authorization header.

ngCookies had to be added to the application:

var app = angular.module('myApp', ['ngCookies']);

Then at the start of the application:

app.run(['$cookies', function ($cookies) {
      $cookies.put("[COOKIE_NAME]", "[TOKEN]");
}
Benjamin
  • 41
  • 4
  • 1
    Could elaborate more on this solution? How do you manage to set cookies for different domain? Do you set `xhr.withCredentials=true`? – mkorszun Jan 05 '17 at 14:30