gpt4 book ai didi

javascript - 对 HTML5 视频使用基于 token 的身份验证

转载 作者:行者123 更新时间:2023-11-30 14:02:11 25 4
gpt4 key购买 nike

我目前在我的 Web 应用程序上使用 JWT 进行身份验证,在 NodeJS 服务器上使用护照。 token 由前端存储,发出的每个请求都与 axios 实例一起使用, header “授权”设置为 token 。

一切正常,但现在我想使用用户上传的展示视频。为此,我想使用相同的机制。问题是使用 <video> HTML 标签,唯一获得资源的方法是使用 src属性,但我想不出一种方法让它使用“授权” header ,因为它没有使用 axios。

有没有办法做到这一点,或者我是否被迫使用 Media Source API 为自己实现某种播放器?我还尝试将 token 作为 URL 中的查询字符串。它确实有效,但这样做是否安全,因为将显示身份验证 token (或仅用于视频资源的新 token )?

注意:(我可以用axios下载整个文件,然后放一个blob作为src,但是效率真的很低)

最佳答案

我找不到任何支持此功能的播放器。使用 <video> 播放媒体文件时,所有播放器都会回退到使用浏览器并且没有办法摆弄 header 来设置身份验证 token 。

添加 header 的唯一方法是使用 HLS 等协议(protocol)。然后通过 XHR 发出请求,您可以访问请求 header :

<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>

关于javascript - 对 HTML5 视频使用基于 token 的身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56146913/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com