停止youtube视频播放点击jQuery

Question

我试图停止YouTube视频，当我点击另一个选项卡，但它似乎只能在第二次轮播。

<!-- click on these to switch the videos -->  
<div class="home-video-item" data-tab="tab-1"> 
    <img src="https://www.image.com"/> 
</div> 
<div class="home-video-item" data-tab="tab-2"> 
    <img src="https://www.image.com"/> 
</div> 

<!-- video boxes --> 
<div id="tab-1" class="home-video-content current"> 
    <iframe width="500" height="281" src="https://www.youtube.com/embed/Qs74-Utqw?feature=oembed" frameborder="0" allowfullscreen=""></iframe> 

</div><div id="tab-2" class="home-video-content current"> 
    <iframe width="500" height="281" src="https://www.youtube.com/embed/Qs74-Utqw?feature=oembed" frameborder="0" allowfullscreen=""></iframe> 
</div> 



$('.home-video-item').on('click', function (e){ 
    var tab_id = $(this).attr('data-tab'); 
    var video = $("#"+tab_id).find("iframe").attr("src"); 

    $("#"+tab_id).find("iframe").attr("src",video); 
}) 

小提琴：https://jsfiddle.net/8oy0odas/

Answer 1

您可以使用IFrame player api暂停与player.pauseVideo()视频：

<!-- click on these to switch the videos --> 
<div class="home-video-item" data-tab="tab-1"> 
    video 1 play 
</div> 
<div class="home-video-item" data-tab="tab-2"> 
    video 2 play 
</div> 

<!-- video boxes --> 
<div id="tab-1" class="home-video-content current"> 
    <iframe id="ytplayer0" width="500" height="281" src="https://www.youtube.com/embed/x6kqVusK26c?enablejsapi=1" frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="tab-2" class="home-video-content current"> 
    <iframe id="ytplayer1" width="500" height="281" src="https://www.youtube.com/embed/x6kqVusK26c?enablejsapi=1" frameborder="0" allowfullscreen></iframe> 
</div> 

的Javascript身体：

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var players = new Array(); 
var iframes = document.getElementsByTagName("iframe"); 

function onYouTubeIframeAPIReady() { 
    for (i = 0; i < iframes.length; i++) { 
    players[i] = new YT.Player(iframes[i].id, {}); 
    } 
} 

$('.home-video-item').on('click', function(e) { 
    for (i = 0; i < iframes.length; i++) { 
    players[i].pauseVideo(); 
    } 
}) 

每一次，一个选项卡被点击，所有玩家都暂停。

Here是工作提琴