HLS.js playlist could not be loaded and the video doesn't work on my web site

[apoklyak]

What do you want to do with Hls.js?

I faced an issue with autoplaying videos on my website, particularly on mobile devices. I've successfully implemented video autoplay for desktop screens. But mobile screens are displaying an error message in Chrome:

I'm working with HTML/CSS/JavaScript and using HLS.js to play videos in chunks. All video content, including chunks and playlists, is hosted on AWS storage.

Here's the HTML code snippet for embedding the video:

<div class="background-video w-background-video w-background-video-atom">
    <video id="video" autoplay loop muted playsinline data-object-fit="cover"
           data-wf-ignore="true">
    </video>
</div>

And below is the JavaScript code I'm using to switch playlists based on screen resolution:

   document.addEventListener('DOMContentLoaded', function () {
        var video = document.getElementById('video');
        var videoSrc = window.innerWidth <= 1024 ?
            'https://d2vsrh5hfn32bm.cloudfront.net/output_mobile_playlist.m3u8' : // Mobile URL
            'https://d2vsrh5hfn32bm.cloudfront.net/output_playlist.m3u8'; // Desktop URL

        if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = videoSrc;
            video.addEventListener('loadedmetadata', function () {
                video.play();
            });
        }
    });

Also I noticed the strange behavior. I am located in Poland. But if I change my IP address to US via VPN, the video will be work well.

It will be great to read some advices.

Link for the web site here https://aig.gvodex.work/index

What have you tried so far?

No response

[robwalch]

mobile screens are displaying an error message in Chrome:

These errors do not originate from HLS.js. HLS content should be served with "Access-Control-Allow-Origin" headers to prevent CORS errors in Web-based players. HLS.js cannot proceed to parse and play content when the first request is blocked by CORS.

Search "AWS storage CORS policy" -> https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html

Here's the HTML code snippet for embedding the video:
And below is the JavaScript code I'm using to switch playlists based on screen resolution:

Since you have "autoplay" on the video element, you do not need to call video.play() in either case. Let the browser handle autoplay (or reject it based on user preference and browser policy).