Sam*_*hri 6 javascript authentication html5-video
我目前正在对需要在我的 Web 应用程序上进行身份验证的每个路由使用 JWT，在 NodeJS 服务器上使用通行证。令牌由前端存储，并且发出的每个请求都与 axios 实例一起使用，标头“Authorization”设置为令牌。
一切正常，但现在我想使用用户上传的节目视频。为此，我想使用相同的机制。问题是使用<video> HTML 标记，获取资源的唯一方法是使用src属性，但我无法找到一种方法使其使用“授权”标头，因为它没有使用 axios。
有没有办法做到这一点，或者我是否被迫使用媒体源 API 实现自己的某种播放器？我也尝试将令牌作为查询字符串放在 URL 中。它确实有效，但这样做是否安全，因为将显示身份验证令牌（或仅用于视频资源的新令牌）？
注意：（我可以用 axios 下载整个文件，然后把一个 blob 作为 src，但它确实效率低下）
小智 4
我找不到任何支持此功能的播放器。所有播放器在播放媒体文件时都会回退到使用浏览器，<video>并且无法修改标头来设置身份验证令牌。
添加标头的唯一方法是使用 HLS 等协议。然后通过 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 = 'Bearer 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>| 归档时间： |
|
| 查看次数： |
3778 次 |
| 最近记录： |