您已经对此进行了调试，并测试了stateChanged函数是否被调用，对吗？那么我建议您这样做的方法是设置一个超时，如果用户没有观看30秒，则清除它。

var toID;
    if (event.data == YT.PlayerState.PLAYING) {
        // Video has started playing, start tracking time
        //startTime = Date.now();
      toID = setTimeout(function() {
        //show the rewards button
        }, 30000 // 30 seconds
      );
    } else {
        // Video has ended, check if user can claim reward
      if (toID) {
        clearTimeout(toID)
      }
    }

您需要在空div或iframe上初始化YT.player，并在src中设置“enablejsapi”和“origin”。下面是一个基于你的工作片段，使用div：

<div class="p-3">
    <div class="space-y-3">
        <h2 class="font-bold">TEST</h2>
        <div class="relative rounded-lg overflow-hidden" style="padding-bottom: 56.25%;">
            <div id="videoFrame"></div>
        </div>

        <div id="claimButton" style="display: none;">
                <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                    Claim Reward
                </button>

                <div class="mt-2 text-green-500">Reward claimed</div>
        </div>

    </div>
</div>

<script>
    // Initialize YouTube Player API
    var player;
    var claimed = false;
    var startTime = null;

    // Function to initialize the player
    function onYouTubeIframeAPIReady() {
        /* player = new YT.Player('videoFrame', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        }); */

        player = new YT.Player('videoFrame', {
        height: '360',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onStateChange': onPlayerStateChange
        }
        });
        console.log(player);
    }

    // Function to handle player state change
    function onPlayerStateChange(event) {
        console.log(event.data);
        if (event.data == YT.PlayerState.PLAYING) {
            // Video has started playing, start tracking time
            if(startTime===null)
                startTime = Date.now();
        } else if (event.data == YT.PlayerState.ENDED) {
            // Video has ended, check if user can claim reward
            checkWatchTime();
        }
    }

    // Function to check watch time and show the "Claim Reward" button
    function checkWatchTime() {
        const currentTime = Date.now();
        const elapsedTime = (currentTime - startTime) / 1000; // Convert to seconds

        if (elapsedTime >= 30 && !claimed) {
            document.getElementById('claimButton').style.display = 'block';
        }
    }
</script>

<script src="https://www.youtube.com/iframe_api"></script>

Here's the documentation