容器关闭时如何停止播放 youtube 视频答案

【问题标题】：how to stop youtube video playing when container closed容器关闭时如何停止播放 youtube 视频
【发布时间】：2015-10-12 11:27:33
【问题描述】：

我看过一些关于此的帖子，但我找到的答案是关于 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();
            });

我如何合并方法来停止每个部分的视频播放？

【问题讨论】：

使用可自定义的视频 API，如 JW 播放器之类的

标签： javascript jquery video youtube youtube-api

【解决方案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 可供使用，但这确实起到了作用。

祝你好运！

【讨论】：