Hls.js: Override chunklist URLs

Created on 26 Feb 2016 · 5Comments · Source: video-dev/hls.js

(A question, not an issue, but I'm sure other people have similar questions)

We have a server that, unfortunately, is configured such that when you query the playlist, you get absolute URLs back for each chunklist.

E.g.

$ curl https://mozillalives-i.akamaihd.net/hls/live/233485/HTTPS_Public/Nomad-1/playlist.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=1017788,CODECS="avc1.77.31,mp4a.40.2",RESOLUTION=640x360
http://mozillalives-i.akamaihd.net/hls/live/233485/HTTPS_Public/Nomad-1_360p/chunklist.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=466070,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=426x240
http://mozillalives-i.akamaihd.net/hls/live/233485/HTTPS_Public/Nomad-1_240p/chunklist.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=307322,CODECS="avc1.66.21,mp4a.40.2",RESOLUTION=284x160
http://mozillalives-i.akamaihd.net/hls/live/233485/HTTPS_Public/Nomad-1_160p/chunklist.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2653402,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=1280x720
http://mozillalives-i.akamaihd.net/hls/live/233485/HTTPS_Public/Nomad-1_720p/chunklist.m3u8

See, I asked for the playlist in HTTPS but each chunklist is listed as HTTP :(

How can I "fix" this in Hls.js? I just want to surgically meddle with the URLs and do a .replace('http://', 'https://') somehwere.

I looked at the custom loaders but I didn't understand how to use them. In particular, I couldn't figure out how to, if I create a custom loader, call the "original/default" loader but with just one extra string replace on the URL somewhere.

Question

Source

peterbe

Most helpful comment

Hi @peterbe, a quick hack would be to use xhrSetup option
https://github.com/dailymotion/hls.js/blob/master/API.md#xhrsetup

var config = {
  xhrSetup: function(xhr, url) {
 // if need to replace URL
 if (url.indexOf('http://') === 0) {
   url = url.replace('http://', 'https://');
   xhr.open('GET', url, true); 
 }
}

var hls = new Hls(config);

as you could see in https://github.com/dailymotion/hls.js/blob/master/src/utils/xhr-loader.js#L61-L71

xhrSetup() is triggered after calling
`xhr.open('GET', this.url, true);``

with this custom xhrSetup, the second call to xhr.open should replace the URL and use the right one

but this is really a hack.
the other clean option would be to listen to MANIFEST_PARSED and iterate through data.levels and replace the URL from there...
and also if you also need to replace fragment URLs you would have to listen to LEVEL_LOADED and iterate through data.details.fragments and replace frag URL from there as well ....

mangui on 2 Mar 2016

👍3

All 5 comments

This HTTPS problem prevents Mozilla from moving Air Mozilla's Wowza live streaming from Flash to HTML5 video.

cpeterso on 1 Mar 2016

Hi @peterbe, a quick hack would be to use xhrSetup option
https://github.com/dailymotion/hls.js/blob/master/API.md#xhrsetup

var config = {
  xhrSetup: function(xhr, url) {
 // if need to replace URL
 if (url.indexOf('http://') === 0) {
   url = url.replace('http://', 'https://');
   xhr.open('GET', url, true); 
 }
}

var hls = new Hls(config);

as you could see in https://github.com/dailymotion/hls.js/blob/master/src/utils/xhr-loader.js#L61-L71

xhrSetup() is triggered after calling
`xhr.open('GET', this.url, true);``

with this custom xhrSetup, the second call to xhr.open should replace the URL and use the right one

mangui on 2 Mar 2016

👍3

It works! https://air-dev.allizom.org/live-event-test/
Sort of. Looking at the web console, the right GETs are made but the video isn't playing.

At the time of writing the URL I use is https://mozillalives-i.akamaihd.net/hls/live/233485/HTTPS_Public/Nomad-1/playlist.m3u8

peterbe on 2 Mar 2016

Scratch my last comment. I had a bug in how I was using it.

peterbe on 2 Mar 2016

Thank you for the help!