Question

我通过YT API控制YouTube iFrame播放器。它在正常情况下工作正常，但在我的过程中，有一个状态，当玩家必须显示：none;用display：block;再次显示播放器后它工作正常，除非它不会触发通常的事件。

测试用例：

使用播放器上的正常播放按钮启动视频 - 播放启动事件将被解雇
停止视频下面的按钮，它将制作一个.stopVideo（）;并隐藏YouTube的父元素 iframe中。
点击显示按钮，将其设置为显示：块;再次
使用播放控件再次启动视频，不再有来自YouTube播放器的任何事件。

你知道解决这个问题的方法吗？（不要隐藏视频的父元素不是一个选项:(）

<div>
    <div id="test" style="width: 300px; height: 200px;"></div>
</div>
<button id="stop">Stop</button>
<button id="show">Show</button>
<br />
<textarea id="console" style="height: 500px;"></textarea>

JS：

var vars = {
    enablejsapi: 1,
    origin: window.location.protocol + "//" + window.location.host,
    autoplay: 0,
    theme: 'dark',
    modestbranding: 1,
    wmode: "opaque",
    rel: 0,
    vq: 'default'
};
var c = $('#console');
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function () {
    var player = $("#test"),
        playercontainer = player.parent();
    playerobj = new YT.Player(player.attr("id"), {
        videoId: '0_aFSNB8E5Y',
        wmode: 'opaque',
        playerVars: vars,
        events: {
            onStateChange: function (state) {
                switch (state.data) {
                    case YT.PlayerState.PLAYING:
                        c.val("play started\n" + c.val());
                        break;
                        //case YT.PlayerState.PAUSED:
                    case YT.PlayerState.ENDED:
                        c.val("play ended\n" + c.val());
                        break;
                }
            }
        }
    });
    $('#stop').click(function () {
        playerobj.stopVideo();
        playercontainer.css('display', 'none');
    });
    $('#show').click(function () {
        playercontainer.css('display', 'block');
        playerobj.addEventListener('onStateChange', 'test');
    });
}

YouTube JavaScript API - 玩家隐藏时不会触发

0 个答案: