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

Question

我尝试了各种各样的东西但是在隐藏的DIV中无法获取YouTube视频以在DIV切换甚至点击之前停止在后台播放.可见性:隐藏似乎没有解决问题.这是我正在使用的代码.希望有人可以帮忙!我可以关闭自动播放来解决它,但这意味着用户必须点击一个额外的按钮(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 url替换为此页面所在的网站.

在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();
      }

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

应该这样做.