ios – The display screen shutdown error when streaming movies on the movie web site makes use of ReactJs

I’m creating a film web site, utilizing HLS.JS to stream movies with M3U8 hyperlink. When utilizing the cellphone system, the display screen might be turned off in accordance with the configuration of the cellphone. For instance, within the cellphone settings to 30s off the display screen if not used, when watching the film additionally flip off the display screen after 30 seconds.

I’m utilizing the next code:

let wakeLock = null;
let hiddenVideo = null;

export const requestWakeLock = async () => {
    strive {
        if ("wakeLock" in navigator) {
            // Wake Lock API hỗ trợ (Chrome, Edge, Android)
            wakeLock = await navigator.wakeLock.request("display screen");
            wakeLock.addEventListener("launch", () => { });
        } else if (/iPhone|iPad|iPod|Macintosh/.take a look at(navigator.userAgent)) {
            // Nếu là Safari hoặc iOS, dùng cách chạy video ẩn
            hiddenVideo = doc.createElement("video");
            hiddenVideo.src = "knowledge:video/mp4;base64,AAAA"; // Video trống
            hiddenVideo.loop = true;
            hiddenVideo.play().catch((err) => console.warn("Không thể phát video:", err));
        } else {
            console.warn("Wake Lock API không được hỗ trợ.");
        }
    } catch (err) {
        console.error(`Wake Lock error: ${err.message}`);
    }
};

export const releaseWakeLock = async () => {
    if (wakeLock) {
        await wakeLock.launch();
        wakeLock = null;
    }
    if (hiddenVideo) {
        hiddenVideo.pause();
        hiddenVideo.take away();
        hiddenVideo = null;
    }
};

However it appears it’s ineffective, as a result of typically it really works, typically it would not work. I discover the bulk doesn’t work on iOS. Hope everybody assist. My web site is https://phimcu.click onThanks a lot!!!