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可供使用，但这确实起了作用。

祝你好运！

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

1 个答案: