onStateChange不会第二次启动

Question

似乎有很多关于onStateChange事件不触发的讨论，但我似乎找不到我的具体问题的答案。在我的情况下，我可以很好地连接API并加载视频。API就绪事件激发，然后是onPlayerReady和onStateChange。当我关闭查看器（嵌入视频的iFrame）并再次打开它时，API就绪事件会触发，然后是onPlayerReady，但当视频开始播放时，onStateChange不会触发。。。

我必须刷新浏览器并再次加载相同或不同视频的脚本才能工作，这在我的情况下显然是不可接受的解决方案。

我也尝试过手动添加侦听器，但不幸的是，我遇到了相反的问题，因为关闭查看器时无法删除该侦听器，因此会触发多个事件。

我还应该补充一点，在Chrome和Firefox（最新版本）中的行为是相同的

我们将非常感谢你在这件事上的帮助。

谢谢，

Answer 1

好的，所以我对代码进行了更多的研究，并将其最小化到了确切的问题。这是iFrame集合url调用的问题。杰夫，我修改了你在JSfiddle上的例子(http://jsfiddle.net/jeffposnick/yhWsG/3/)如下所示：

HTML代码：

    <div id="DIVTAG">
        <iframe class="gwt-Frame" id="player" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?wmode=transparent&amp;enablejsapi=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;fs=0;autoplay=1"></iframe>
    </div>
<button onclick="hide()">Hide Player</button>
<button onclick="show()">Show Player</button>

JavaScript代码：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        events: {
            'onReady': onReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
function onReady() {
   alert("player ready");
}
// The API will call this function when the video player state changes.
function onPlayerStateChange(event) {
    alert("player state changed");
}
function hide() {
   player.stopVideo();
   document.getElementById("player").style.display="none";
}
function show() {
  document.getElementById("player").style.display="block";       
document.getElementById("player").src="https://www.youtube.com/embed/M7lc1UVf-VE?wmode=transparent&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&fs=0;autoplay=1"; 
}

您可以选择忽略"隐藏播放器"按钮，只需在视频加载后单击"显示播放器"，您将看到一旦第二次加载播放器，stateChange事件将不会启动。

我只是设置iframe的源，在该iframe上两次都会触发onReady事件，但onStateChange不会。希望这有助于提出解决方案。

Answer 2

这不是将新视频加载到现有播放器中的方法。您应该调用player.loadVideoById('VIDEOID')，而不是尝试更改现有iframe的src属性。

如前所述，请不要通过设置display: none来隐藏玩家。如果需要，您可以将玩家移出屏幕（负x/y位置）。