javascript - 在播放和播放YouTube iframe嵌入时触发事件

Question

我正在关注:
Fire an event on play of youtube iframe embed
但就我而言，我在播放/暂停时隐藏/显示了一个div。可以使用以下方法，但是它会在第一次播放单击时(仅在第一次单击时)触发两个事件。就好像是:
首次播放单击-> slideUp-> slideDown-> slideUp
之后，它可以按我需要的方式工作在播放-> slideUp 和在停止-> slideDown

谁能看到我错了？

<script src="https://www.youtube.com/iframe_api"></script>
<div class="header_div">HEADER DIV</div>

<div id="video"></div>

var player, playing = false;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video', {
        height: '450',
        width: '800',
        videoId: 'jNQXAC9IVRw',
        events: {
            'onStateChange': onPlayerStateChange
            }
    });
}

function onPlayerStateChange(event) {
    if(!playing){
        $(".header_div").slideUp('slow');
        playing = true;
    } else {
        $(".header_div").slideDown('slow');
        playing = false;
    }
}

Answer 1

玩家有多种状态会在付款事件开始时触发向上滑动，并在玩家暂停或结束时向下滑动

function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.PLAYING && !playing){
        $(".header_div").slideUp('slow');
        playing = true;
    } else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
        $(".header_div").slideDown('slow');
        playing = false;
    }