Javascript Can'；加载视频时，请不要关闭Youtube视频

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

一切似乎都很好地工作，但在移动设备上（速度比桌面慢），我注意到当视频加载时，如果用户决定关闭它，他就不能。（但一旦视频开始播放，点击关闭按钮即可关闭视频…）

为了模拟这个问题，我创建了一个浏览器，并邀请您打开谷歌Chrome开发工具，在网络选项卡上设置2G速度，以便有时间见证这一现象

我不知道它是否相关，但为了给出上下文，我使用了Bootstrap3和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>

CSS

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();
            });
          }
        }
      });
    }
  }

#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;
}

---

注意，除非视频开始播放，否则您在

onStateChange

中对

$（“.yt close”）

的单击事件不会绑定。我建议将此

单击事件绑定

移动到外部某处，并尝试通过任何其他可能的方式清除

视频元素/iframe

。

您的

单击事件

以获取

$（“.yt close”）

内部

状态更改

不绑定，除非视频开始播放。我建议将此移到外部，并尝试通过其他方式清除视频

元素/iframe

。如果您想回答，我可以给您投票点：）嗨，Rao，我有一个小问题，由于神秘的原因无法在JSFIDLE上复制它。现在，根据您的建议，我可以在onstatechange（=视频开始）之前关闭视频，但问题是，如果我再次单击按钮，视频加载不是从一开始，而是好像它已经向前移动（即使在我关闭视频后它是不可见的）。请遵循前面的注释：解决方案是使用event.target.stopVideo（），如下所示：$（“.yt close”）。单击（function（）{event.target.stopVideo（）；$（$（this.data（“target”））.hide（）；但由于它现在在函数load_yt_player（）之外（感谢您的建议），然后它就不工作了，我得到了一个错误，因为当然event.target不再定义了…当我单击“关闭”按钮时，我如何告诉应用程序停止视频？@Mathieu..并且可能会让你有更好的想法..：）thanls会看它