onStateChange 不会触发第二次

Question

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

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

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

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

非常感谢您在这件事上的帮助。

谢谢，

Answer 1

好的，所以我对代码进行了更多研究，并将其最小化为确切的问题。这是 iFrame set 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 事件。

我只是设置了两次触发 onReady 事件的 iframe 的源，但 onStateChange 不是。希望这有助于提出修复建议。

Answer 2

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

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