What do you want to do with Hls.js?

Catch video playback errors while playing video with hls.js

What have you tried so far?

I'm listening to errors on hls.js through the public event API:

hls.on(Hls.Events.ERROR, onHlsError);

However, I'm catching an error that looks like this:

{
  "type":"mediaError",
  "parent":"main",
  "details":"bufferAppendError",
  "sourceBufferName":"video",
  "error":{
    "stack":"Error: Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null.\n at bufferController.appendExecutor
  }
}

The original error is what has me confused. I expect hls.js to raise an error immediately if the video element throws an error, so I am not listening directly to videoElement.addEventListener("error", ...) to avoid error reporting race conditions between hls.js and native errors.

However, in this particular case hls.js will not raise the natively thrown error, instead it will retry appending the segment 5 times, then raise the bufferAppendError instead of the native error. This creates a misleading error, since it doesn't indicate the root cause that made the videoElement throw.

When playing video through hls.js, is the integration expected to look for errors on both the native video element, as well as errors thrown through the hls.js api? If I need to listen to two separate sources for playback errors, that risks creating race-conditions that will hide errors from one source or the other.