/template/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Song requests</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!--유튜브 플레이어-->
    <div id="player">1</div>

    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!--유튜브 플레이어 생성, 제어-->
    <script>
    // YouTube 플레이어를 생성
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            width: '1600',
            height: '900',
            videoId: '{{ youtube_video_ids }}', // 여기에 동영상의 ID를 입력합니다.
            playerVars: {
            'autoplay': 1, // autoplay 속성을 1로 설정하여 자동 재생합니다.
            'controls': 1,
            'rel': 1
            },
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // 플레이어의 상태 변경 이벤트 핸들러
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            $.ajax({
                url: '/delete_video',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.data !== null) {
                        console.log("요청성공!")
                    }
                }
            });
        }
    }
    </script>
    <!--새로고침 하는것-->
    <script>

        // 주기적으로 데이터를 확인하고 페이지를 새로 고침하는 함수
        function checkAndRefresh() {
            $.ajax({
                url: '/check_data',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.data !== null) {
                        // 새로운 데이터가 있는 경우 페이지를 새로 고침
                        location.reload();
                    }
                }
            });

        }

        // 주기적으로 데이터 확인 및 새로고침 실행 (예: 5초마다)
        setInterval(checkAndRefresh, 1500);  // 5초마다 확인하도록 설정
        setInterval(function() {
            console.log("asdf");
        }, 1500);

    </script>
</body>
</html>