getting Uncaught (in promise) DOMException: The play() request was interrupted by a new load request

[vishalkr058]

I am trying to play hls .m3u8 url using react-hls-player but video get interrupted continuously by giving error Uncaught (in promise) DOMException: The play() request was interrupted by a new load request in the console. Here is a screenshot of the error.

[timcole]

I'm currently experiencing this same problem if anyone has any ideas that would be of great help.

      <ReactHlsPlayer
        playerRef={ref}
        src={stream}
        poster={image}
        muted
        height={200}
        width={355.55}
        autoPlay
        hlsConfig={{
          maxLatency: 10,
          maxLoadingDelay: 2,
          minAutoBitrate: 0,
          lowLatencyMode: true,
        }}
      />

[vishalkr058]

@devcshort if u could help on this issues?

[timcole]

It seems this issue was related to unnecessary rerenders.

Firstly if using next, it seems like you HAVE to load ReactHlsPlayer with dynamic imports.

import dynamic from 'next/dynamic';
const ReactHlsPlayer = dynamic(() => import('react-hls-player'));

This fixed the immediate issue but it would occur for me again once the stream loaded. In my case, it was because on stream load I'm updating a status indicator that was causing the player to rerender, so memoizing it solved that issue.

[vishalkr058]

Hi @timcole , Thanks for the response, meanwhile i tried different player and that worked for me.