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