javascript - 无法停止隐藏 DIV 中的 YouTube 视频在后台播放

Question

我尝试了各种方法，但在单击 DIV 切换按钮之前，无法让隐藏 DIV 中的 YouTube 视频停止在后台播放。可见性:隐藏似乎没有解决问题。这是我正在使用的代码。希望有人可以帮忙!我可以关闭自动播放来解决这个问题，但这意味着用户必须单击一个额外的按钮(YouTube“播放”按钮)，这并不理想。

** 在网页中:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".productDescription").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    return false;
    });

});

</script>

** 在体内:

<div class="productDescription">

<iframe width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0" frameborder="0" allowfullscreen></iframe> 
<div class="closebutton"><a href="index.php" onClick="javascript:location.replace(this.href);" class="show_hide">Close Video</a>
</div>
</div>

** 以及样式表中的:

.productDescription {
display: block;
position:absolute;
left:0px;
top:-2px;
z-index:5;
background-color: #000;
margin: 0px;
float: left;
padding: 0px;
width: 715px;
min-height: 600px;
height: 600px;
}

.show_hide {
display:none;
}

.closebutton {
display: block;
width:120px;
height: 22px;
position:absolute;
left:20px;
top:50px;
background-color: #000;
padding-top: 3px;
float: left;
z-index: 9999;
}

提前非常感谢!

Answer 1

自动播放功能将在视频加载后开始播放视频，无论 div 是可见还是隐藏。

但是，如果您删除自动播放设置，则可以使用 YouTube API 来控制视频，以便当用户点击显示 div 时视频就会开始播放。一种选择是iframe API (我建议这样做，因为您已经使用 iframe 嵌入视频，如果观看者使用移动设备，这允许 YouTube 提供 HTML5 视频而不是 Flash 视频)另一个选项是 JavaScript API .

由于您要求提供更多详细信息，因此这里简要说明了如何使用 YouTube iFrame API 来满足您的需求。我建议您阅读文档，以便您了解正在发生的情况并根据需要进行调整。

首先，在 HTML 中按照与上面相同的方式创建 iframe 视频，但添加两件事:iframe 的 ID 和 iframe src 中的 origin 参数。 (origin 参数可以帮助您的 YouTube 播放器免受 JavaScript 黑客攻击。)所以它看起来像这样:

<iframe id="player" width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0&origin=http://example.com/" frameborder="0" allowfullscreen></iframe>

将 example.com 网址替换为该页面所在的网站。

iframe 之后、</body> 之前的某个位置标签，添加此代码来加载 api 并初始化播放器:

  <script>
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player');
  }
</script>

然后，在 JavaScript 中，在 $('.productDescription').slideToggle() 行之前添加以下代码:

  if ($('.productDescription').is(':visible')) {
       player.pauseVideo();
      }
  else {
       player.playVideo();
      }

此代码将测试 .productDescription 是否div 可见。如果隐藏，它将启动视频并显示 div。如果不可见，它将暂停视频并隐藏 div。

应该可以了。