javascript - Load m3u8 video file as Blob with different orign

Question

I'm attempting to stream video using a Blob URL created from an m3u8 URL.

The m3u8 file contains only relative paths.

E.g.

file1.ts
file2.ts
...

The m3u8 file is stored on a separate host (e.g. the URL is fileserver.com/path/thevideo.m3u8) than the website loading the video (e.g. the URL is website.com).

Therefore, after converting the m3u8 URL to a Blob, the video player subsequently looks for:

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

Whereas, the actual URLs are:

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

Question is, is there any way to get the video player (I'm using VideoJS) to use the correct URL prefix?

The code I used for Blob URL generation is here: set video objects source file to a blob url

I can confirm that it works if the m3u8 file contains the full *.ts URLs instead of the relative paths, but I want to see if this is possible using only the relative path as that would be more convenient.

question from:https://stackoverflow.com/questions/65835994/load-m3u8-video-file-as-blob-with-different-orign

Answer 1

You can attach a custom handler for requests made by videojs/http-streaming engine.

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

  return options;
};

Note: You should make a check with safari hls playback if you're using overrideNative option.