javascript - 容器关闭后如何停止播放YouTube视频

Question

我已经看到了一些有关此的帖子，但是我发现的答案是关于1个视频，而不是同一页面上的多个视频。

我的网页上大约有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可以使用，但这确实完成了工作。

祝好运!