使用JQuery切换功能显示/隐藏YouTube，但无法让它停止在隐藏上播放

Question

我正在使用jquery函数来切换我网站上的youtube视频元素。它工作得很好，并在需要时显示/隐藏它。然而，我找不到一种方法来阻止隐藏div的视频播放。我一直在阅读关于破坏元素，然后在toggle上召回它，但我对代码的了解不够，无法知道如何或在toggle函数中做到这一点。任何帮助都会很棒的。我在

下面添加了我的代码

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

        .vidblock
        {
            background:#ccc;
            width:430px;
            height:320px;
            display:none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.toggle').click(function(){
                $('.vidblock').toggle("slow");
            });
        });
    </script>

和

<h3><a href="#" class="toggle">Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</a></h3>

Answer 1

好的!我花了一点时间才弄明白这一点，当我告诉你它是有意义的。

确保你正在调用youtube api:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

隐藏div时，使用jquery将视频的源更改为相同的视频，而不使用自动播放。这将停止播放视频，并将其重新设置。

另一个很酷的事情，我发现，当打开我的div，我把它打开自动播放。

你可以在这个页面上看到一个演示:http://advantageanywhere.com/index.aspx?sid=250点击播放链接，它会打开一个灯箱(类似于你正在做的，显示和隐藏div。在它的原始状态中，我把它隐藏在那里，作为一个普通的嵌入链接。一旦点击，然后它变成自动播放，然后当escape或X被点击，它会关闭灯箱，也改变视频回到正常嵌入(停止播放)

我们将以以下视频为例:原始嵌入youtube[添加一个ID (youtube)到它的目标在jquery，和parm youtube api (?enablejsapi=1)]:

这就是你应该如何让图像在它的隐藏div中开始。

一旦div被打开，这就是你需要的jquery:

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */

现在，当div被隐藏时，这就是你需要的jquery:

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */

下面是我设置的整个脚本。我试着把这些拼凑在一起，但我现在没有时间，只是在我试图打卡最后期限时偶然发现了你的问题。

如果你还有任何问题，我不介意帮忙，请。

$(window).load(function(){
    var KEYCODE_ESC = 27;
    $(document).keyup(function(e) {
        if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }  
    });
    function closeLightBox() {
         $("#lb1, #lb4").fadeOut();
         $("#featureContent, #videoContent").hide();
         $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
    }           
     /* ------------   Light Box 4 Video ------------- */
    var lightBox4 = $('#lb4'),
    videoContent = $('#videoContent');
    $('#anywhereVideo').click(function() {
        lightBox4.fadeIn(function() {
            videoContent.show(); 
                $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
        });
    });

    $('#close4').click(function() {
        closeLightBox();
    });   
    });

Answer 2

您不需要销毁该元素，只需使用YouTube JavaScript API (http://code.google.com/apis/youtube/js_api_reference.html)暂停或停止视频。

你给对象一个playerapiid，然后你可以用JavaScript瞄准它。

Answer 3

您可以使用'detach' -

$(function() {
    var savedNodes;
    $('.toggle').toggle(function() {
        $('.vidblock').hide('slow', function() {
            savedNodes = $('yourplayerid').detach();
        });
    }, function() {
        $('.vidblock').append(savedNodes)
        $('.vidblock').show('slow');
    });
});

Demo - http://jsfiddle.net/Sf4LT/2/