javascript - 如何在 native 浏览器请求上设置 header ,或者在使用 Video.js 从 Microsoft Azure 播放视频时提供授权 header ?

标签 javascript angular azure video.js request-headers

我正在尝试使用 Video.js 从 Microsoft Azure 加载一些视频内容,并且我需要添加一些 header 以进行 SharedKey 授权。几天来我一直在尝试各种方法并进行研究,但我遇到了困难,确实需要一些帮助。

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

Azure 建议我们这样做:

https://learn.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,“此方法也将不可用,因为 native 播放用于带有 HLS 的 Safari”。 (那么我们需要使用 DASH 吗?或者这在 Safari 上也不起作用吗?)

3-仍然无法为字幕轨道添加标题,无论我们使用原生字幕,还是通过 videojs.players.video.addRemoteTextTrack 添加它们。

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

1-尝试使用xhook拦截。

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

这两种方法都不起作用。

所以,我的问题是:

1-是否有一种我忽略的方法可以让我向浏览器 native 发出的请求添加/注入(inject) header ?

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

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

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

最佳答案

考虑到您要直接提供以 blob 形式存储在 Azure 存储中的视频文件,您可以使用共享访问签名 (SAS)。 SAS 提供对 blob 的有时间限制、受权限限制的访问。

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

您可以在此处找到有关共享访问签名的更多信息:https://learn.microsoft.com/en-us/rest/api/storageservices/delegate-access-with-shared-access-signature 。您需要创建一个 Service SAS为你的 Blob 。

关于javascript - 如何在 native 浏览器请求上设置 header ,或者在使用 Video.js 从 Microsoft Azure 播放视频时提供授权 header ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67277533/

相关文章:

javascript - 主干本地存储适配器 : Uncaught Error: A "url" property or function must be specified

Angular2 this.route.params.map

javascript - 将 Cache-Control 和 Expires header 添加到 Azure Blob 存储 Node JS

javascript - 当我跳转到另一个页面时 JS 代码停止

javascript - Angular 过滤器: don't use the data of the other array

Angular Material 2 : Selected tab gets deselected on focus lost

Angular 2 测试输入框绑定(bind)

python-3.x - 为什么队列绑定(bind)在 Azure 中不起作用?

azure - 过滤 API 管理请求中的 header

ruby-on-rails - RJS 返回没有 JS 标签的纯 JavaScript