0

我的网站上有一个标签界面，其中包含最后一个标签上的图像和 youtube 视频。一切正常，但是每次我切换标签时，视频都不会停止播放。有没有办法来解决这个问题？提前致谢。

这是选项卡的脚本：

$("#simple-tabs .tab_content").hide(); //Hide all content
$("#simple-tabs ul.tabs li:first").addClass("active").show(); //Activate first tab
$("#simple-tabs .tab_content:first").show(); //Show first tab content

//On Click Event
$("#simple-tabs ul.tabs li").click(function(e) {
    $("#simple-tabs ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $("#simple-tabs .tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    e.preventDefault();
});


(function ($) { 
        $('.tab ul.tabs li:first-child a').addClass('current');
        $('.tab .tab_content div.tabs_tab:first-child').show();

        $('.tab ul.tabs li a').click(function (g) { 
            var tab = $(this).parent().parent().parent(), 
                index = $(this).parent().index();

            tab.find('ul.tabs').find('a').removeClass('current');
            $(this).addClass('current');

            tab.find('.tab_content').find('div.tabs_tab').not('div.tabs_tab:eq(' + index + ')').slideUp();
            tab.find('.tab_content').find('div.tabs_tab:eq(' + index + ')').slideDown();

            g.preventDefault();
        } );
    } )(jQuery);

这是 HTML 标记：

<div id="tab3" class="tab_content">
   <div class="video-container">
     <iframe width="510" height="270" src="http://www.youtube.com/embed/6Cf7IL_eZ38" frameborder="0" allowfullscreen></iframe>
    </div>
 </div>
4

1 回答 1

1

您可以使用youtube iframe api控制视频，因此像这样加载 JS：

<script src="//www.youtube.com/iframe_api" />

然后id在 iframe 上放置一个属性，例如：

<iframe id="ytplayer" ... >

你应该能够像这样停止它：

player = document.getElementById('ytplayer');

function stop(){
    player.stopVideo();
    return false;
}
于 2012-11-06T04:22:47.033 回答