Question

围绕onStateChange事件似乎有很多讨论没有解雇，但我似乎无法找到答案我的具体问题。在我的情况下，我可以很好地连接API并加载视频。触发API就绪事件，然后是onPlayerReady，然后是onStateChange。当我靠近观众（嵌入视频的iFrame）并再次打开它时，API就绪事件会触发，然后是onPlayerReady，但是当视频开始播放时onStateChange不会触发......

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

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

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

非常感谢你对此事的帮助。

谢谢，

Answer 1

好的，所以我更多地挖掘代码并将其最小化到确切的问题。这是iFrame设置网址调用的问题。杰夫，我在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&amp;enablejsapi=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;fs=0;autoplay=1"; 

}

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

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

Answer 2

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

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

onStateChange第二次不会触发

2 个答案: