Question

我有一个处理流视频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插件中添加自定义标头，以便将数据发送到我的后端？

Answer 1

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

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

向videojs播放器源添加自定义标头

2 个答案: