Youtube api onStateChange不会第二次触发

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

我必须刷新浏览器并再次加载脚本，以使相同或不同的视频正常工作，这显然不是一个可接受的解决方案

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

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

你在这件事上的帮助将不胜感激

---

谢谢，

好的，所以我进一步深入研究了代码，并将其最小化到准确的问题。这是iFrame set url调用的一个问题。Jeff，我在JSfiddle（）上修改了您的示例，如下所示：

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>

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"; 

}

您可以选择忽略“隐藏播放器”按钮，并在视频加载后单击“显示播放器”，您将看到在第二次加载播放器后不会触发状态更改事件

---

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

这不是将新视频加载到现有播放器的方式。您应该调用

player.loadVideoById（'VIDEOID'）

，而不是试图更改现有iframe的

src

属性

---

如前所述，请不要通过设置

display:none

来隐藏播放器。如果需要，您可以将播放器移出屏幕（负x/y位置）。

不清楚“关闭查看器”是什么意思。您是否正在设置显示：无？我们可以尝试一个实际的实例来演示您的问题，我们将不胜感激。它是一个自定义查看器，基本上嵌入了指定的视频。只是DIV标记中的一个iFrame。本质上，DIV设置为“display:none”。我的代码都集成在web应用程序中，整个功能很难提取。我删除了block语句中可能存在的重复项。仅仅设置新的URL源也会表现出同样的行为。因此，如果我理解正确，第一次我应该在URL中使用视频ID设置源？然后使用loadByVideoID方法？当我尝试这样做时，旧视频再次加载。如果您使用的是

YT.Player

API（您就是这样），那么您就不需要显式创建

iframe

或设置其

src

YT.Player

将从

videoId

参数中获取初始视频id，您应该将该参数传递给构造函数，然后调用

loadVideoById（）

将新视频加载到现有播放器中。请看