There is a segment in the hls video that loads many times (QuotaExceededError)

[vaseala]

What do you want to do with Hls.js?

Maybe there is an error segment in my video, and I hope not to load this error segment repeatedly

What have you tried so far?

I created a github repository to reproduce the issue： https://github.com/issuebox/video-problem

Run the local environment and open http://localhost:5173/hls

When playing around 48 seconds into the video, an error occurs, and then the 14.m4s segment of the video is loaded many times

[robwalch]

In the future please file a bug report making sure to include the console logs with error details.

I was able to reproduce the issue with the sample found in issuebox/video-problem. This was not a case of loop loading, but rather the last two video segments failing to append because the browser throws QuotaExceededError over the course of several target durations of playback.

With six second segments each at 18-19MB each, after a short while without media ejecting from the back buffer, the quota is full and the default buffer config options are not strict enough to prevent this error. There's a problem between the middle of sn 2 and the start of sn 10 at 14.833s-1:00.833 where the browser will not eject media. Are these all non-independent segments missing IDR frames? Even if you set a lower forward buffer you can run into issues if the back buffer cannot be ejected safely. This can be seen when attempting to set backBufferLength to a reasonably low value anywhere between 45-12 seconds; When the back buffer is removed, everything up to 1:00.833 goes with it. This is an authoring issue. You have a stretch of eight segments adding up to over 150MB and it is enough to fill up a large portion of the available quota.

The default behavior for handling QuotaExceededError is to lower the max buffer length and reset the loading state. This unfortunately requires the media that failed to append to be reloaded. The error repeats a couple times in this case because there is 45 seconds of playback before playback clears the stretch of video that must be removed at once. Hls.js expects the problem to be resolved after one target duration with independent segments (not eight).

You can workaround this issue by adding a maximum buffer length of two target durations to your config: maxMaxBufferLength: 12. Anything more would result in at least one quota exceeded error as 60 seconds fills it, and you have a 45 second stretch that is unremovable while being played.

[vaseala]

Thanks @robwalch

Yes, in addition to the large file size, some clips of this video may have some errors.

We directly convert the mp4/mkv video uploaded by the user into an m3u8 file through ffmpeg -codec copy

The problem now is: our users say that their videos can be played normally on desktop players such as vlc, but after we convert them, they are easily stuck at the 48th second position when playing on the browser.

If necessary, I can send you the video source file.