javascript - 显示 :none not working on iPhone simulator

Question

我目前正致力于将 YouTube 视频嵌入网站。

我已经创建了自己的自定义播放和暂停按钮，其中一个会在给定时间显示。如果视频正在播放，则显示暂停按钮，如果视频暂停，则显示播放按钮。

它在桌面上正常工作，但是，在 iOS 模拟器上测试时，两个按钮都显示并且 display:none 似乎不起作用。

有没有人见过这个？解决办法是什么？这似乎是非常奇怪的行为。此外，当我在 chrome 中测试并检查它在 iPhone 上的外观时，它按预期工作，但模拟器显示不同的行为。

请看下面我的代码。奇怪的是，当您运行代码片段时，下面的代码中显示了相同的错误，但是，正如我在 chrome 上测试时提到的那样，它运行得很好。

<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>

Answer 1

<use>标签呈现它们指向的内容，它们不应该呈现它们的 child 。

<use> 标签的 href (SVG2) 或 (xlink:href (SVG 1.1) 属性应通过路径 ID 指向您的路径。

在您的情况下，您可能会完全删除标签，而只有可以显示或隐藏的路径。