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>

**和STYLESHEET：

.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>

希望它运作良好。

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

2 个答案: