将 m3u8 视频文件加载为具有不同来源的 Blob答案

【问题标题】：Load m3u8 video file as Blob with different orign将 m3u8 视频文件加载为具有不同来源的 Blob
【发布时间】：2021-01-21 21:28:30
【问题描述】：

我正在尝试使用从 m3u8 URL 创建的 Blob URL 流式传输视频。

m3u8 文件只包含相对路径。

例如

file1.ts
file2.ts
...

m3u8 文件存储在与加载视频的网站（例如 URL 是 website.com）不同的主机上（例如 URL 是 fileserver.com/path/thevideo.m3u8）。

因此，在将 m3u8 URL 转换为 Blob 后，视频播放器随后会查找：

website.com/file1.ts
website.com/file2.ts

而实际的 URL 是：

fileserver.com/path/file1.ts
fileserver.com/path/file2.ts

问题是，有没有办法让视频播放器（我正在使用 VideoJS）使用正确的 URL 前缀？

我用于 Blob URL 生成的代码在这里：set video objects source file to a blob url

如果 m3u8 文件包含完整的 *.ts URL 而不是相对路径，我可以确认它可以工作，但我想看看是否可以只使用相对路径，因为这样会更方便。

【问题讨论】：

【解决方案1】：

您可以为videojs/http-streaming 引擎发出的请求附加自定义处理程序。

player.tech().vhs.xhr.beforeRequest = function(options) {
  options.uri = options.uri.replace('example.com', 'foo.com');

  return options;
};

注意：如果您使用 overrideNative 选项，则应检查 safari hls 播放。

【讨论】：