Question

我有一个按钮，点击后会显示YouTube视频。在视频上方，我放置了一个关闭按钮，以便用户可以关闭它。

一切似乎都运行良好，但在移动设备上（速度比桌面速度慢），我注意到视频加载时，如果用户决定关闭它，那么他就不能。（但是一旦视频开始播放，然后点击关闭按钮就会关闭视频......）

为了模拟此问题，我创建了jsfiddle并邀请您打开Google Chrome开发者工具并在网络标签上设置2G速度，以便有时间见证这种现象。

我不知道它是否相关但是给出了上下文，我使用的是bootstrap 3和jquery。

HTML

<section id="buttons">
  <a class="btn btn-primary" id="videoModal">
       <span class="title">hello</span><br/>
  </a>
</section>

<div id="container">
 <button type="button" class="yt-close" data-target="#container">×</button>
  <div id="ytplayer"></div>
</div>

JS

load_yt_player();
function load_yt_player() {
    $("#videoModal").click(function(){
      $("#video-container").fadeIn(1000);
      runPlayer( "Aph6N3FI4qI" );
    });

    if(document.getElementById('iframe_api') === null){
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      tag.id  = "iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }

    var player;
    function runPlayer( video_id ){
      if(player) {
        player.playVideo();
        return player;
      }
      player = new YT.Player('ytplayer', {
        playerVars: {
            autoplay: 1,
          html5: 1,
          controls: 0,
          modestbranding: 1,
          showinfo: 0,
          loop: 0,
          enablejsapi: 1,
          origin: document.domain,
          fs: 1,
          wmode: "opaque"
        },
        videoId: video_id,
        events: {
          onStateChange: function (event) {           
            if(event.data === YT.PlayerState.PAUSED){
              event.target.stopVideo();
              $("#container").hide();
            }
            // On End
            if(event.data === YT.PlayerState.ENDED){
              event.target.stopVideo();
              $("#container").hide();
            }
            // On close button click
            $(".yt-close").click(function(){
              event.target.stopVideo();
              $( $(this).data("target") ).hide();
            });
          }
        }
      });
    }
  }

CSS

#buttons a {
    display: block;
    margin-bottom: 10px;
    white-space: normal;
    padding: 6px 7px;
    width: 5Opx;
}

.yt-close {
  position: absolute;
  top: 0;
  right: 0;  
}

button.yt-close {
  color: black;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none;
  display: block;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  font-size: 100px;
}

JSFIDDLE link

Answer 1

我们注意到，除非视频开始播放，否则$(".yt-close")内的onStateChange点击事件不具有约束力。我建议将此click event binding移到某处，并尝试通过其他任何方式清除video element/iframe。

加载视频时无法关闭Youtube视频

1 个答案: