document.addEventListener("DOMContentLoaded", async () => {
            const videoElement = document.querySelector("video");
            const videoSource = videoElement.getElementsByTagName("source")[0].src;

            try {
                // Fetch the resource in no-cors mode
                await fetch(videoSource, { mode: 'no-cors' });
                // Load the video URL directly into the player
                if (Hls.isSupported()) {
                    const hlsConfig = { maxMaxBufferLength: 100 };
                    const hls = new Hls(hlsConfig);
                    hls.loadSource(videoSource);

                    hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
                        const qualities = hls.levels.map(level => level.height);

                        const plyrOptions = {
                            quality: {
                                default: qualities[0],
                                options: qualities,
                                forced: true,
                                onChange: newQuality => {
                                    hls.levels.forEach((level, index) => {
                                        if (level.height === newQuality) {
                                            hls.currentLevel = index;
                                        }
                                    });
                                }
                            }
                        };

                        new Plyr(videoElement, plyrOptions);
                    });

                    hls.attachMedia(videoElement);
                    window.hls = hls;
                } else {
                    new Plyr(videoElement, {});
                }
            } catch (error) {
                console.error("Error loading the video:", error);
            }
        });