index.htlm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Video Loader</title>
    <style>
        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
            gap: 10px;
        }
        video {
            border: 0px solid #ccc;
            border-radius: 5px;
            width: 720px;
            height: 1280px;
            display: none; /* Скрываем видео по умолчанию */
        }
    </style>
</head>
<body>
    <div id="video_container1">
        <video id="video1" autoplay muted>
            <source src="" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div id="video_container2">
        <video id="video2" autoplay muted>
            <source src="" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div id="video_container3">
        <video id="video3" autoplay muted>
            <source src="" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <script>
        const folders = [
            "E:/TWITCH/TARO/folder1",
            "E:/TWITCH/TARO/folder2",
            "E:/TWITCH/TARO/folder3"
        ];

        function getRandomVideo(folderPath) {
            const maxVideos = 11; // Общее количество видео в папках!!!
            const randomIndex = Math.floor(Math.random() * maxVideos) + 1; // Случайное число от 1 до максимальных
            return `${folderPath}/video${randomIndex}.mp4`;
        }

        function playVideosTARO() {
            document.querySelector("#video1 source").src = getRandomVideo(folders[0]);
            document.querySelector("#video2 source").src = getRandomVideo(folders[1]);
            document.querySelector("#video3 source").src = getRandomVideo(folders[2]);

            document.querySelector("#video1").load();
            document.querySelector("#video2").load();
            document.querySelector("#video3").load();

            document.querySelectorAll("video").forEach(video => {
                video.style.display = "block";
                video.play();
            });

            setTimeout(() => {
                document.querySelectorAll("video").forEach(video => {
                    video.pause();
                    video.style.display = "none";
                });
            }, 15000);
        }

        // Подключение к локальному WebSocket
        const ws = new WebSocket('ws://localhost:9090');

        ws.onmessage = (event) => {
            const message = JSON.parse(event.data);
            if (message.action === 'playVideosTARO') {
                playVideosTARO();
            }
        };

        ws.onopen = () => console.log("Connected to WebSocket server");
        ws.onerror = (error) => console.error("WebSocket error:", error);
    </script>
</body>
</html>