YouTube JavaScript API - игра не запускается, когда игрок скрыт

Я управляю плеером YouTube iFrame через YT API. Он нормально работает в обычных случаях, но в моем процессе есть состояние, когда плеер должен отображаться: нет; После того, как я снова показываю плеер с дисплеем: блок; он работает нормально, за исключением того, что он не запускает обычные события.

http://jsfiddle.net/wDDuW/

Прецедент:

  1. Запустите видео с помощью кнопки обычного воспроизведения на плеере - событие запуска воспроизведения будет запущено
  2. Остановите видео кнопкой ниже, это сделает.stopVideo(); и скрыть родительский элемент в фрейме YouTube.
  3. Нажмите на кнопку показа, которая установит его для отображения: блок; снова
  4. Запустите видео снова с помощью элемента управления воспроизведением, и больше не будет событий от проигрывателя 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');
    });
}

0 ответов

Другие вопросы по тегам