YouTube API - onPlayerStateChange

我将 YouTube API 与 Cyclone Slider 结合使用。目标是在 YouTube 开始播放后暂停幻灯片放映。我正在使用以下代码，效果很好：

<script>
var tag = document.createElement('script');
 tag.src = "//www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

<script>
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
}

function onPlayerStateChange(event) {
    if(event.data === 1) {
        $(".cycle-slideshow").cycle('pause');
    }

    if(event.data === 2) {
        $(".cycle-slideshow").cycle('resume');
    }
}
</script>

然而，它似乎只有在我刷新页面时才有效。如果我在页面之间导航并返回主页，它将不再起作用。

对于为什么会出现这种情况有什么建议吗？我尝试了在 Google 上找到的一些建议，但没有任何效果。我对此有点迷失。

任何帮助将不胜感激。

尝试以下代码，它对我有用 -

function loadYouTube(targetId){
    ytplayer = new YT.Player(targetId, {
        events: {
            'onStateChange': function(event){
                /** YouTube API
                        -1 (unstarted)
                        0 (ended)
                        1 (playing)
                        2 (paused)
                        3 (buffering)
                        5 (video cued)
                 **/
                if (event.data == 1) {
//do your work here
                }
                console.log(event.data)
            }
        }    
    });
}