有没有办法在 <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，我实现了一个Interceptor来设置header:

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

这里的问题是，它没有捕捉到对视频的调用，所以没有设置标头(尽管对于其他资源来说).所以 angular 不会加载视频.这没有什么大的惊喜.查看开发者工具中的Network选项卡，发现是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，还是通过 angular，甚至是修改 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屋！