在播放和停止 youtube iframe 嵌入时触发事件答案

【问题标题】：Fire an event on play & stop of youtube iframe embed在播放和停止 youtube iframe 嵌入时触发事件
【发布时间】：2017-06-28 15:59:06
【问题描述】：

我正在关注这个： Fire an event on play of youtube iframe embed 但就我而言，我在播放/暂停时隐藏/显示一个 div。以下工作，但它在第一次播放点击时触发这两个事件，仅在第一次。就好像是： 首次播放点击 -> slideUp -> slideDown -> slideUp 之后它可以根据我的需要运行 On Play->slideUp 和 On Stop->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;
    }
}

【问题讨论】：

玩家有多个状态见stackoverflow.com/a/8204143/4613398了解更多信息，你只需要2个状态
感谢您提供此链接。
在下面查看我的答案

标签： javascript jquery iframe youtube

【解决方案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;
    }

【讨论】：