Why does hls.js download the largest segment on slow connections

[JoshuaHintze]

I've been trying to figure out the algorithm for how it selects its first segment to download. In the picture below, you can see that I have network capped at 3G speeds. The index.m3u8 has the following

#EXTM3U
#EXT-X-INDEPENDENT-SEGMENTS

#EXT-X-STREAM-INF:BANDWIDTH=500k,RESOLUTION=854x480
video-480p/480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1000k,RESOLUTION=1280x720
video-720p/720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1500k,RESOLUTION=1920x1080
video-1080p/1080p.m3u8

I've scaled down the responsive viewport to cell phone size. Then Empty Cache/Hard Reload. It seems like no matter what HLS.JS downloads the 1080p version first taking 22 seconds to then realize the internet is slow so it should download the 480p version. Going forward.

Here is my sample code:

        window.hls = new Hls({ debug: false, capLevelToPlayerSize: true });

        hls.attachMedia(video);
        hls.loadSource(videoSrc);

        hls.on(Hls.Events.MANIFEST_PARSED, () => {
            // hls.nextLevel = -1;
            console.log("Available levels:", hls.levels);

            console.log('Auto level enabled:', hls.autoLevelEnabled);
            
            // Attempt to play
            video.play().catch(err => console.warn("Autoplay blocked, user must click play.", err));
        });

        hls.on(Hls.Events.BUFFER_STALLED_ERROR, () => {
            console.log("Buffering detected, switching to lowest quality.");
        });

        hls.on(Hls.Events.ERROR, function (event, data) {
            console.warn("Error event:", data);
            if (data.fatal) {
            switch(data.type) {
                case Hls.ErrorTypes.NETWORK_ERROR:
                // try to recover 
                hls.startLoad();
                break;
                case Hls.ErrorTypes.MEDIA_ERROR:  
                // try to recover
                hls.recoverMediaError();
                break;
                default:
                // cannot recover
                hls.destroy();
                break;
            }
            }
        });

Any thoughts?

[JoshuaHintze]

Adding some debug logs

[log] > [stream-controller]: Trigger BUFFER_RESET
hls.js@latest:1 [log] > resume buffering
hls.js@latest:1 [log] > [buffer-controller] Media source opened
hls.js@latest:1 [log] > [level-controller]: manifest loaded, 3 level(s) found, first bitrate: 500
hls.js@latest:1 [log] > [buffer-controller] 1 bufferCodec event(s) expected
(index):33 Available levels: (3) [e, e, e]
(index):35 Auto level enabled: true
hls.js@latest:1 [log] > startLoad(-1)
hls.js@latest:1 [log] > resume buffering
hls.js@latest:1 [log] > [abr] picked start tier {"videoRanges":[],"preferHDR":false,"minFramerate":0,"minBitrate":500000}
hls.js@latest:1 [info] > [abr] switch candidate:0->2 adjustedbw(500000)-bitrate=498500 ttfb:0.1 avgDuration:0.0 maxFetchDuration:4.0 fetchDuration:0.1 firstSelection:true codecSet:undefined videoRange:undefined hls.loadLevel:-1
hls.js@latest:1 [log] > [level-controller]: Switching to level 2 (1080p SDR @1500) from level -1
hls.js@latest:1 [log] > [level-controller]: Loading level index 2 with http://localhost:3000/video-1080p/1080p.m3u8
hls.js@latest:1 [log] > [stream-controller]: STOPPED->IDLE
hls.js@latest:1 [log] > [subtitle-stream-controller]: STOPPED->IDLE
favicon.ico:1 
        
        
        GET http://localhost:3000/favicon.ico 404 (Not Found)
hls.js@latest:1 [log] > [stream-controller]: Level 2 loaded [0,10][part-10--1], cc [0, 0] duration:60.066667
hls.js@latest:1 [log] > [buffer-controller] Updating Media Source duration to 60.067
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-10] level: 2, target: 0
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > injecting Web Worker for "main"
hls.js@latest:1 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 0 p: -1 level: 2 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0
        initSegmentChange: true
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 0 of level 2
9f9320a1-1f2f-462f-a5d3-60c87dc6c9d3:1 [log] > Debug logs enabled for "main" in hls.js version 1.5.20
hls.js@latest:1 [log] > [mp4-remuxer]: ISGenerated flag reset
hls.js@latest:1 [log] > [mp4-remuxer]: initPTS & initDTS reset
hls.js@latest:1 [log] > [mp4-remuxer]: reset next timestamp
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: Init video buffer, container:video/mp4, codecs[level/parsed]=[/avc1.4d4028]
hls.js@latest:1 [log] > [buffer-controller] 0 bufferCodec event(s) expected video
hls.js@latest:1 [log] > [buffer-controller] creating sourceBuffer(video/mp4;codecs=avc1.4d4028)
hls.js@latest:1 [log] > Setting autoLevelCapping to 0: 480p@500 for media 303x170.4375
hls.js@latest:1 [log] > set autoLevelCapping:0
hls.js@latest:1 [log] > [audio-stream-controller]: InitPTS for cc: 0 found from main: 138000
hls.js@latest:1 [log] > [transmuxer.ts]: Flushed fragment 0 of level 2
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 0 of level 2 (frag:[0.000-6.000] > buffer:[0.000-6.000])
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [info] > [abr] switch candidate:2->0 adjustedbw(380248)-bitrate=379748 ttfb:2.1 avgDuration:6.0 maxFetchDuration:6.0 fetchDuration:4.1 firstSelection:false codecSet: videoRange:SDR hls.loadLevel:2
hls.js@latest:1 [log] > [stream-controller]: Adapting to level 0 from level 2
hls.js@latest:1 [log] > [level-controller]: Switching to level 0 (480p SDR @500) from level 2
hls.js@latest:1 [log] > [level-controller]: Loading level index 0 with http://localhost:3000/video-480p/480p.m3u8
hls.js@latest:1 [log] > [stream-controller]: IDLE->WAITING_LEVEL
hls.js@latest:1 [info] > [abr] rebuffering expected, optimal quality level 0
hls.js@latest:1 [log] > [stream-controller]: Level 0 loaded [0,10][part-10--1], cc [0, 0] duration:60.066667
hls.js@latest:1 [log] > [stream-controller]: WAITING_LEVEL->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-10] level: 0, target: 6
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING

[JoshuaHintze]

Ok, I think I solved this by adding startLeve = -1 here

          hls.on(Hls.Events.MANIFEST_PARSED, () => {
            hls.startLevel = -1;
            ... 
          });
``

I'm still curious why the next level algorithm would purposely seek through the levels and select the largest one eventhough I had it last in my list.

Here is my levels it pulled

Available levels: [{"_attrs":[{"BANDWIDTH":"500k","RESOLUTION":"854x480"}],"bitrate":500,"codecSet":"","url":["http://localhost:3000/video-480p/480p.m3u8"],"frameRate":0,"height":480,"id":0,"width":854,"fragmentError":0,"loadError":0,"realBitrate":0,"_avgBitrate":null,"_urlId":0},{"_attrs":[{"BANDWIDTH":"1000k","RESOLUTION":"1280x720"}],"bitrate":1000,"codecSet":"","url":["http://localhost:3000/video-720p/720p.m3u8"],"frameRate":0,"height":720,"id":0,"width":1280,"fragmentError":0,"loadError":0,"realBitrate":0,"_avgBitrate":null,"_urlId":0},{"_attrs":[{"BANDWIDTH":"1500k","RESOLUTION":"1920x1080"}],"bitrate":1500,"codecSet":"","url":["http://localhost:3000/video-1080p/1080p.m3u8"],"frameRate":0,"height":1080,"id":0,"width":1920,"fragmentError":0,"loadError":0,"realBitrate":0,"_avgBitrate":null,"_urlId":0}]

[robwalch]

"1500k" is not a valid value for BANDWIDTH. parseInt ignores the "k" so the bitrate is parsed as 1500. That puts it well below the default estimate of 50000.

[robwalch]

If you want to limit the selected variant based on resolution, enable capping as outlined in the API docs: https://github.com/video-dev/hls.js/blob/master/docs/API.md#capleveltoplayersize

[JoshuaHintze]

Hey robwalch, just saw this. Thank you for your answers. I'll update my m3u8 files and remove the "K".