如何在本机浏览器请求上设置 headers,或者在使用 Video.js 播放来自 Microsoft Azure 的视频时以其他方式提供授权 headers?

How to set headers on native browser requests, or otherwise provide authorization headers while using Video.js to play video from Microsoft Azure?

我正在尝试使用 Video.js 从 Microsoft Azure 加载一些视频内容,我需要添加一些 headers 用于 SharedKey 授权。这几天我一直在尝试各种方法并进行研究,但我正在碰壁,真的需要一些帮助。

重要的是要注意,这是针对使用 Angular / Cordova 编写的移动应用程序。

Azure 建议我们这样做:

https://docs.microsoft.com/en-us/azure/media-services/latest/player-how-to-video-js-player

基本上,通过将函数附加到 videojs.Hls.xhr.beforeRequest。

不幸的是,这种方法存在几个问题。这是 videojs 问题跟踪器中的一张票,试图寻找这些问题的解决方案:

https://github.com/videojs/video.js/issues/7207

总结:

1- 我们没有使用 HLS/DASH。我们正在从 blob 存储加载 mp4 文件。而 videojs“将其直接交给浏览器,它会处理所有内容的加载,同时不提供这组额外的功能。”

2- 即使我们要转换媒体并使用 HLS,“此方法将不可用,因为本机播放用于带 HLS 的 Safari。”。 (那么我们需要使用 DASH 吗?还是说它在 Safari 上也不起作用?)

3- 字幕轨道还是没办法加headers,我们是用原生字幕,还是通过videojs.players.video.addRemoteTextTrack加。

我也尝试过其他替代方法,例如

1- 尝试使用 xhook 拦截它。

2- 尝试使用@angular/common/http/HttpInterceptor.

两种方法都无效。

所以,我的问题是:

1- 是否有一种我忽略的方法允许我向浏览器本地发出的请求添加/注入 headers?

2- 是否可以使用授权 cookie 来完成?我在其他一些问题中看到过这个,但是我找不到任何具体的例子,而且我不确定它如何与 Azure 一起工作。

3- 如果一切都失败了,是否有其他视频播放器可以提供更好的授权选项支持?

任何其他建议也将不胜感激。谢谢。

考虑到您要直接在 Azure 存储中提供存储为 blob 的视频文件,您可以使用 Shared Access Signature (SAS)。 SAS 提供对 blob 的限时、权限绑定访问。

它的工作方式是当用户请求播放视频时,您需要向后端服务发送请求。您的后端服务将为 blob 创建一个 SAS 令牌,该令牌具有 Read 权限(播放视频只需要此权限)和一些到期日期(取决于视频的长度)。您的后端服务将 return SAS URL 用于视频播放器播放视频的 blob(类似于 blob-url?sas-token)。

您可以在此处找到有关共享访问签名的更多信息:https://docs.microsoft.com/en-us/rest/api/storageservices/delegate-access-with-shared-access-signature. You will need to create a Service SAS 为您的 blob。