停止youtube視頻播放點擊jQuery

我試圖停止YouTube視頻，當我點擊另一個選項卡，但它似乎只能在第二次輪播。停止youtube視頻播放點擊jQuery

<!-- 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/

來源

2017-07-27 Mark

你說的是什麼形式的標籤約 - 這是一個應用程序選項卡或瀏覽器選項卡？更新：哦，我明白了。那麼，我知道我怎麼會在React中做到這一點...這不幫助你，雖然...嗯....昏暗的想法 – archae0pteryx

我已經添加了Jsfiddle – Mark

真棒...我只是重新創建你的情況 – archae0pteryx

您可以使用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是工作提琴

來源

2017-07-28 00:26:16

感謝您的幫助，只是想知道..有沒有一種更簡單的方法來暫停所有的iframe視頻時.home-vide-item被點擊？而不是將玩家加入陣列。 – Mark

如果你的意思是沒有硬編碼的球員編號列表，請參閱我更新後的文章 –

完美，謝謝！ – Mark

停止youtube視頻播放點擊jQuery

回答

相關問題