当容器关闭时，如何停止播放YouTube视频

Question

我看过一些关于这个的帖子，但我发现的答案是关于一个视频，而不是多个视频在同一个页面上。

我的网页上有大约10个视频。当我们点击每个按钮时，我想要叠加弹出。然后是要播放的视频

一旦用户点击退出按钮，我希望视频停止播放。

如果用户没有点击youtube视频的暂停并退出，它会在后台继续播放。

在这个例子中，我将只显示2个视频部分:

  <div class="play-button">
      <i class="fa fa-play"></i>
  </div>
  <div class="youtube-frame">
      <div class="exit-youtube-frame">
          <i class="fa fa-times"></i>
      </div>
      <iframe width="520" height="345" src="<?= $video ?>"></iframe>
  </div>

  <div class="play-button">
      <i class="fa fa-play"></i>
  </div>
  <div class="youtube-frame">
      <div class="exit-youtube-frame">
          <i class="fa fa-times"></i>
      </div>
      <iframe width="520" height="345" src="<?= $video ?>"></iframe>
  </div>

现在在Jquery中我这样做:

            jQuery('.play-button').click(function(){
                jQuery('#overlay-youtube').show(); // This is the overlay
                jQuery(this).next().show();
            });
            jQuery('.exit-youtube-frame').click(function(){
                jQuery(this).parents('.youtube-frame').hide();
                jQuery('#overlay-youtube').hide();
            });

我如何纳入方法，将停止视频播放的每个部分?

Answer 1

我在网站上显示产品视频时遇到了同样的问题，在关闭覆盖层后停止播放。

只要你不需要暂停视频，这样用户就可以从他们离开的地方捡起，你可以简单地使用detach()方法在jQuery中存储视频对象，然后在用户点击显示它时将其重新添加到DOM中。

这是我的代码只是一个视频(HTML然后jQuery):

<div id="product-video-overlay">
  <div id="video-container">
     <a class="close-overlay">Close</a>
     <iframe id="ytplayeroverlay" type="text/html" src="{youtubeURL}"></iframe>
  </div>
</div>

    var videoOverlay = $('#product-video-overlay');
    var videoObject = videoOverlay.find('#video-container');
    var hasVideo = 1;
    $('li.video-thumb').click(function () {
       if (hasVideo == 0) {
          videoObject.appendTo(videoOverlay);
       }
       videoOverlay.fadeIn();
    });
    $('#product-video-overlay, #product-video-overlay a.close-overlay').click(function (e) {
       e.stopPropagation();
       videoOverlay.fadeOut();
       videoObject.detach();
       hasVideo = 0;
    });

因为你有多个视频，你将需要一些方法来识别播放按钮与其相应的覆盖/视频(可能添加一个匹配类到每个?)。

同样，您可能希望将每个分离的元素存储到一个数组中，以便稍后通过匹配类或用于将按钮链接到适当视频的任何方法检索。

这就是我解决这个问题的方法。我知道有一个YouTube API可以使用，但这已经完成了工作。

祝你好运!