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 に答える