有没有办法在 <video> 源代码调用中包含自定义 http header？

Question

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

由于应用程序使用 AngularJS，我实现了一个拦截器来设置 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');
}

这个问题是视频的调用没有被它捕捉到，所以没有设置 header（虽然是为其他资源设置的）。所以 angular 不会加载视频。这没什么大惊喜的。查看开发者工具中的网络选项卡，发现videoJS发起调用：

但是在 videoJS 插件中找到我的方式很困难，并且无法找到调用的位置。我只是想知道，是否有一种简单的方法可以为此调用设置 header？不管是普通 javascript，还是通过 angular，甚至是修改 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

我也运行关注过这个问题。我想将授权 header 与请求的每个视频和图像一起发送到我的网站，并使用原生 html5 视频标签。搜索了很长时间后，我找不到任何允许自定义 headers 的解决方案。最后，我决定在应用程序启动时创建一个 cookie。由于每次请求都会发送 cookie，因此我能够将我的 Web API 设置为仅在请求图像和视频时查找此 cookie。这样站点的其余部分将继续使用授权 header.

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

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

然后在应用程序开始时：

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

有没有办法在 <video> 源代码调用中包含自定义 http header？

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

javascript

angularjs

html

http

video.js