如何让 HLS.js 从服务器端获取数据？

Posted 2023-03-07

【中文标题】如何让 HLS.js 从服务器端获取数据？

【英文标题】：How to let HLS.js fetch data from server side?

【发布时间】：2021-10-02 12:14:15

【问题描述】：

我使用 hls.js 实现了我的视频播放器，我在 https:/// 中有一些 ts 文件和一个 m3u8 文件。

我用php读取m3u8文件并将内容发送到js（res["manifest"]=m3u8的内容），然后放入hls.loadSource()，如下。

var manifest = res["manifest"];
var blob = new Blob([manifest]);
var hls = new Hls();
var url = URL.createObjectURL(blob);

hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() 
    video.load();
);

此后，hls开始获取m3u8中列出的文件

blob:https://<my domain>/<video name>.mp4

当然，它找不到文件，因为它们在里面

https://<my domain>/<video name>.mp4

而不是

blob:https://<my domain>/<video name>.mp4

request log

以“blob:”开头的 url 是由前端的 URL.createObjectURL 创建的，但是现在我希望 hls 向 video.php 发送请求，然后 video.php 读取 ts 文件并从服务器返回内容一边。

有什么方法可以做到吗？ （修改源代码，更改设置，...等）

【参考方案1】：

我不敢相信我做到了。

我修改了src/loader/fragment.ts的源码如下：

@@ -78,9 +78,7 @@ export class BaseSegment 
 
   get url(): string 
     if (!this._url && this.baseurl && this.relurl) 
-      this._url = buildAbsoluteURL(this.baseurl, this.relurl, 
-        alwaysNormalize: true,
-      );
+      this._url = 'video.php?f=' + this.relurl;
     
     return this._url || '';
   

然后用 webpack 重新编译。 现在它使用查询参数“f=