Question

我的网站上有一个标签界面，其中包含最后一个标签上的图片和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>

Answer 1

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

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

然后在iframe上添加id属性，如：

<iframe id="ytplayer" ... >

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

player = document.getElementById('ytplayer');

function stop(){
    player.stopVideo();
    return false;
}

如何在标签中停止视频？

1 个答案: