Question

我目前正在对每条需要在我的Web应用程序上进行身份验证的路由使用JWT，使用NodeJS服务器上的通行证。令牌由前端存储，每个请求都与axios实例一起使用，头标为“ Authorization”。

一切正常，但是现在我要使用用户上传的视频节目。为此，我想使用相同的机制。问题是，使用<video> HTML标记，唯一获得资源的方法是使用src属性，但是我无法找到一种使它使用'Authorization'标头的方法它没有使用axios。

有没有办法做到这一点，还是我不得不使用Media Source API来实现某种播放器？我也尝试将令牌作为查询字符串放入URL中。确实可以，但是这样做安全吗，因为将显示auth令牌（或仅用于视频资源的新令牌）？

注意：（我可以使用axios下载整个文件，然后将blob作为src，但这确实效率很低）

Answer 1

我找不到任何支持此功能的播放器。当使用<video>播放媒体文件时，所有播放器都退回使用浏览器，并且无法摆弄Headers来设置身份验证令牌。

添加标头的唯一方法是使用像HSL这样的协议。然后通过XHR发出请求，您可以访问请求标头：

<html>

<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <meta charset="utf-8">
</head>

<body>
  <video
         id="my_video"
         class="video-js"
         controls
         preload="auto"
         width="640"
         height="268"
         data-setup="{}"
         >
  </video>
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script>
  videojs.Hls.xhr.beforeRequest = function(options) {
    options.headers = options.headers || {};
    options.headers.Authorization = 'Barer token';
    console.log('options', options)
    return options;
  };
  var player = videojs('my_video');
  player.ready(function() {
    this.src({
       src: "https://dl5.webmfiles.org/big-buck-bunny_trailer.webm",
      type: "video/webm",
    });
  });
</script>
</body>

</html>

对HTML5视频使用基于令牌的身份验证

1 个答案: