将 m3u8 视频文件加载为不同来源的 Blob

编程问答 2022-05-29

问题描述

我正在尝试使用从 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 而不是相对路径，我可以确认它可以工作，但我想看看这是否可以仅使用相对路径，因为这样会更方便。

解决方法

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

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

  return options;
};

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

javascriptm3u8video-streamingvideo.js