Question

切换标签会停止iframe视频播放

当用户单击另一个标签时如何暂停原始标签的视频

<ul>
    <li id="01">01</li>
    <li id="02">02</li>
    <li id="03">03</li>
    <li id="04">04</li>
</ul>

<div id="tabs">

    <div id="tab-1">
        <h3>video 1</h3>
        <div width="420" height="150" data-href="" frameborder="0" allowfullscreen></div> <!--<This is iframe>-->
    </div>

    <div id="tab-2">
        <h3>video 2</h3>
        <div width="420" height="150" data-href="" frameborder="0" allowfullscreen></div> <!--<This is iframe>-->
    </div>

    <div id="tab-3">
        <h3>video 3</h3>
        <div width="420" height="150" data-href="" frameborder="0" allowfullscreen></div> <!--<This is iframe>-->
    </div>

    <div id="tab-4">
        <h3>video 4</h3>
        <div width="420" height="150" data-href="" frameborder="0" allowfullscreen></div> <!--<This is iframe>-->
    </div>

</div>

预先感谢

Answer 1

我发现了类似的问题。

但是我不知道如何修改

http://jsfiddle.net/EPEDr/3/

$("#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
        $('.video-container iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        });
    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);

切换标签页可停止iframe视频播放

1 个答案: