无法停止隐藏 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 网址替换为该页面所在的网站。

在 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。

应该可以的。

Answer 2

我有同样的问题，但是我可以用这个来解决。参考YouTubeAPI，我们不能直接实现。所以我这样编辑。

Step1：创建loadYTScript()函数并放入youtubeAPI代码，

Step2: 是调用函数 onYouTubeIframeAPIReady() 然后在 onclick 调用加载函数。 这是你的js代码：

function loadYTScript(){
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];

                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    
                }
        function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {                                         
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
                        events: {
                            'onReady': onPlayerReady,
                          }
                    });
                }
                function onPlayerReady(event) {
                    event.target.playVideo();
                }
                jQuery(document).ready(function()    {
                $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    loadYTScript();
    });
    });

在html中不要忘记添加

<div class="productDescription">        
            <div id="player"></div>
        </div>

希望一切顺利。