I got this error using HLS for make a streaming platform in Next.js and Node.js with Express. This works in Edge and Chrome navegators, but when i test in Opera appears this console error:

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Then, when i play the video, appears this:

GET blob:http://ip/8e8e208a-ddbb-4afe-b9db-55588d2bde00 net::ERR_FILE_NOT_FOUND

The http server works succesfully, so i dont have idea why brokes in other navogators

This is how i got the m3u8 from server

useEffect(() => {
        const hls = new Hls();
        hlsRef.current = hls;
        const { current: videoElement } = videoRef;

        const loadVideo = async () => {
            if (!videoElement) return;

            if (Hls.isSupported()) {
                hls.loadSource('HTTP-EXAMPLE');
                hls.attachMedia(videoElement);
                hls.on(Hls.Events.MANIFEST_PARSED, () => {
                    videoElement.play();
                });
            } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
                videoElement.type = 'application/vnd.apple.mpegurl';
                videoElement.src = 'HTTP-EXAMPLE';
                videoElement.muted = true;
                videoElement.play();
            }
        };

        loadVideo();

        return () => {
            if (hls) {
                hls.destroy();
            }
        };
    }, []);

I tried in another navegators versions, normally the moderns suported Hls and i tried with creating hls instances