停止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

回答

相关问题