有没有办法在<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;
    };
});

Answer 2

我也遇到过这个问题。我想向我的网站发送一个授权标题以及请求的每个视频和图像，并使用原生的html5视频标记。搜索了很长时间后，我无法找到任何允许自定义标头的解决方案。最后，我决定在应用程序开始时创建一个cookie。由于每次请求都会发送cookie，因此我只能在请求图像和视频时设置我的Web API以查找此cookie。这样，网站的其余部分将继续使用授权标题。

必须将ngCookies添加到应用程序中：

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

然后在申请开始时：

app.run(['$cookies', function ($cookies) {
      $cookies.put("[COOKIE_NAME]", "[TOKEN]");
}