有没有办法在<video>源调用中包含自定义http标头？

Question

我有一个简单的html5播放器,用videoJS实现.为了从服务器正确检索源文件,我需要在视频请求中设置自定义标头.

由于应用程序使用AngularJS,我实现了一个Interceptor来设置标头:

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

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

问题在于,它没有捕获对视频的调用,因此没有设置标头(虽然对于其他资源).所以angular不会加载视频.没什么大惊喜的.检查开发人员工具中的"网络"选项卡,发现videoJS启动了呼叫:

但是在videoJS插件中找到我的方式很困难,而且无法找到调用的位置.我只是想知道,有没有一种简单的方法来为这个电话设置标题？如果它是普通的javascript,或通过角度,甚至修改videoJS插件无关紧要.

Answer 1

在Angular运行块内,您可以覆盖videojs插件XHR beforeRequest函数.YMMV,但是如果你使用HLS插件,你可以这样做:

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;
    };
});