Progressive mode is broken with fmp4 playback

[kedanielwu]

What version of Hls.js are you using?

1.0.10

What browser (including version) are you using?

Chrome 93.0.4577.63 (Official Build) (x86_64)

What OS (including version) are you using?

MacOS 11.3

Test stream

https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s-fmp4/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8

Configuration

{
  "debug": true,
  "enableWorker": true,
  "backBufferLength": 90,
  "progressive": true
}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. choose any fmp4 playback in the demo page
2. enable progressive mode

Expected behaviour

the video should play correctly

What actually happened?

video stuck at loading, and warning can be found in the console

So basically what I found is in base-stream-controller, no onprogress callback is provided when trying to load initSegement, while the fetch-loader, in this case, will resolve the load promise with empty data and calling onsuccess.

In our own forked version, what I did is forcing fetch-loader to go through the 'full' load path when fragment sn is initSegment, by setting highwatermark to Infinity or by removing onprogress callback. And this seems fixed the issue.

I don't think this is a proper fix, but I think I need some knowledge to fully understand the issue. would there be any risk when trying to progressively load initSegement?

Console output

f17655d0-f3f7-4596-9862-c9c69543b6a8:2479 [warn] > [passthrough-remuxer.ts]: initSegment does not contain moov or trak boxes.
generateInitSegment @ f17655d0-f3f7-4596-9862-c9c69543b6a8:2479
remux @ f17655d0-f3f7-4596-9862-c9c69543b6a8:2517
flushRemux @ f17655d0-f3f7-4596-9862-c9c69543b6a8:938
flush @ f17655d0-f3f7-4596-9862-c9c69543b6a8:925
(anonymous) @ f17655d0-f3f7-4596-9862-c9c69543b6a8:139
f17655d0-f3f7-4596-9862-c9c69543b6a8:2523 [warn] > [passthrough-remuxer.ts]: Failed to generate initSegment.

Chrome media internals output

No response

[dylanjha]

@kedanielwu thanks for reporting, I dug into this a bit, looks to be a regression between 1.0.0 and 1.0.1:

(Add "progressive": true in the config panel):

Here's 1.0.0 permalink with HLS fMP4 by Bitmovin

• Not observing the bug here

[bug] Here's 1.0.1 permamlink with HLS fMP4 by Bitmovin

• I do see the bug happening from 1.0.1 onward

Based on that, it appears the regression was introduced in this v1.0.1 release. Here's the diff

There was a fix for progressive in this release, so that might be a good place to dig in

Fixed progressive fetch loader leaves video artifacts or glitches - #3755 Resolves #3747

[kedanielwu]

@dylanjha thanks for the information, I will take a look into this and hopefully provide a fix.