В настоящее время я работаю над встраиванием видео на YouTube.Дисплей: нет на симуляторе iPhone
Я создал свои собственные кнопки воспроизведения и паузы, из которых один отображается в данный момент времени. Если видео воспроизводится, отображается кнопка паузы, и если видео приостановлено, отображается кнопка воспроизведения.
Это работает как на рабочем столе, однако при тестировании на iOS-симуляторе отображаются обе кнопки, и display:none
не работает.
Кто-нибудь видел это раньше? Каково решение? Это похоже на очень странное поведение. Кроме того, когда я тестирую хром и проверяю, как он выглядит на iPhone, он работает так, как ожидалось, однако симулятор показывает другое поведение.
См. Мой код ниже. Как ни странно, такая же ошибка показана в приведенном ниже коде, когда вы запускаете фрагмент кода, однако, как упоминалось ранее, когда я тестирую на хроме, он отлично работает.
<style>
#pause-button {
display: none;
}
</style>
<script type="text/javascript">
// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the video iframe
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
// call this function when player changes state i.e. when video ends
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
playButton.style.display = "none";
pauseButton.style.display = "block";
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
playButton.style.display = "block";
pauseButton.style.display = "none";
});
}
function onPlayerStateChange(event) {
//replay when video ends
if (event.data === 0) {
player.playVideo();
}
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<!-- Make sure ?enablejsapi=1 is on URL -->
<!-- &controls=0 hides controls -->
<!-- &showinfo=0 hides information -->
<!-- &rel=0 prevents related video been shown at the end -->
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YXsGr21GD0M?enablejsapi=1&html5=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
<div class="buttons">
<!-- if we needed to change height/width we could use viewBox here -->
<svg class="button" id="play-button">
<use xlink:href="#play-icon">
<path id="pause-icon" data-state="playing" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" />
</use>
</svg>
<svg class="button" id="pause-button">
<use xlink:href="#pause-icon">
<path id="play-icon" data-state="paused" d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" />
</use>
</svg>
</div>
попробуйте установить встроенный css первый раз –
@ Kirankumar, к сожалению, это не работает –
попытайтесь добавить 'display: none' и' visibility: hidden' как элемент стиля, как описано здесь http://stackoverflow.com/a/24578882/3840093 –