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

Question

I used hls.js to implement my video player,and I have some ts files in https:/// with one m3u8 file.

I readed the m3u8 file with php and sent the content to js (res["manifest"]=the content of m3u8),then put it into hls.loadSource(),as below.

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();
});

After this,the hls started to get the files listed in m3u8 by

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

Of course,it can't find the files because they are in

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

instead of

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

request log

The url starts with "blob:" is created by URL.createObjectURL in front-end,but now I want that hls sends requests to video.php,then video.php reads the ts files and responses the contents back from server side.

Any method to do this? (modify the source code,change setting,...etc)

Answer 1

I can't believe that I achieved it.

I modified the source code of src/loader/fragment.ts below:

@@ -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 || '';
   }

then recompiled with webpack. Now it sends the get request to video.php with query parameter "f=<video name>.mp4",so I can process the request with my video.php.