有没有办法在< video>中包含自定义http标头？来电？ [英] Is there a way to include a custom http header in a <video> source call?

问题描述

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

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.

由于应用程序使用AngularJS，我实现了拦截器设置标头：

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

问题是，视频的调用没有被它捕获，因此没有设置标头（虽然它是因此，角度不会加载视频。没有什么大惊喜。检查开发人员工具中的网络选项卡，发现videoJS发起了呼叫：

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:

但是找到我的方式videoJS插件一直很难，而且无法找到调用的位置。我只是想知道，是否有一种简单的方法来设置此调用的标头？无论是简单的javascript，还是通过角度调整，甚至是修改videoJS插件。

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.

推荐答案

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

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

这篇关于有没有办法在< video>中包含自定义http标头？来电？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！