将自定义标头添加到 videojs 播放器源答案

【问题标题】：Add custom headers to videojs player source将自定义标头添加到 videojs 播放器源
【发布时间】：2017-06-28 16:07:55
【问题描述】：

我有一个处理流式视频 m3u8 文件的后端 api（使用 express）。

http://localhost:3000/api/stream.m3u8

此端点仅适用于正确的用户token。

路由器

router.get('/api/stream.m3u8', controller.stream);

控制器

exports.stream = function(req, res) {
   var token = ''; // ? not sure how to get access to a sent up token
   if (!token) res.status(401).json('Not authorized');
   // if token is valid, proceed
};

在前端，我使用的是videojs。

 var player = videojs('my-player', {})

 // set source to my backend api m3u8 file
 player.src({
    src: 'http://localhost:3000/api/stream.m3u8',
    type: 'application/x-mpegURL'
  });

有没有办法向 videojs 插件添加自定义标头以将数据发送到我的后端？

【问题讨论】：

你可以检查这个方法：stackoverflow.com/a/70734868/516512它是有意义的，是安全的。

标签： javascript express video.js http-live-streaming

【解决方案1】：

Videojs 初始化发生在客户端，因此您需要在此初始化之前传递令牌。我建议您使用 ajax 初始化 Videojs 并使用 Ajax 发送令牌。我希望它有所帮助。

【讨论】：

【解决方案2】：

我采用的解决方案是拦截浏览器 XHR 请求（使用 xhook npm 包）并以编程方式设置标头。下面是一个简单的例子：

...

this.player.src({
  src: SOME_VIDEO_URL,
});

...

/**
 * add manifest authorization header
 */
window.xhook.before((request, callback) => {
  // only set header request for the videojs src url (don't touch other xhr requests)
  if (request.url === SOME_VIDEO_URL) {
    request.xhr.setRequestHeader('Authorization', manifestAuthorization);
  }
  callback();
});

【讨论】：