使用jQuery在同一页面中只允许一个YouTube视频

Question

我有一些视频是从我的"index.php"中嵌入YouTube的。我可以通过反复点击几个视频来同时观看。所以，像往常一样可以做到。但我想以某种方式阻止它。

例如，我正在观看X视频，我点击播放观看Y视频。当我这样做时，X视频应该停止。然后我应该能够继续观看Y视频。我在一个网站上看到了这个功能，我不记得它的名字。而且我不知道该怎么做并且有想法。

我能猜到的是它可以通过使用一些JavaScript或jQuery来完成。

以下是YouTube视频代码的示例：

<iframe width="426" height="240" src="//www.youtube.com/embed/lWA2pjMjpBs?rel=0" frameborder="0" allowfullscreen></iframe>

Answer 1

这是我的JavaScript（没有jQuery）解决方案，只允许一个YouTube视频播放。

DEMO。

首先，您只需将脚本添加到HTML页面即可添加Youtube API：

<script src="https://www.youtube.com/iframe_api"></script>

然后根据需要粘贴尽可能多的嵌入视频。请记住

？enablejsapi = 1＆版本= 3＆WMODE =透明

需要添加到每个链接才能访问API。我用yt_videos类将视频包装在div中。

<div class="yt_videos">
        <iframe class="video_groups" src="https://www.youtube.com/embed/r4CH0al0ucs?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <iframe class="video_groups" src="https://www.youtube.com/embed/lL9Zoc46ZG0?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <iframe class="video_groups" src="https://www.youtube.com/embed/s1NZ2mkW0hM?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
    </div>

然后在javascript中我访问youYouTubeIframeAPIReady（），这样我就可以控制玩家的行为。我循环遍历iframe并分配唯一的ID：

var players = [];

function onYouTubeIframeAPIReady() {

var predefined_players = document.getElementsByClassName("yt_videos")[0].getElementsByTagName('iframe');

for(var i = 0; i < predefined_players.length; i++){
predefined_players[i].id = "player" + i;
  players[i] = new YT.Player("player" + i, {
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }
});
}
}

function onPlayerStateChange(event) {
    var link = event.target.a.id;
    var newstate = event.data;
if (newstate == YT.PlayerState.PLAYING) {
players.forEach(function(item, i) {
    if (item.a.id != link) item.pauseVideo();
});
}
}

见DEMO。

Answer 2

您可以使用Youtube JS API https://developers.google.com/youtube/js_api_reference

有了它，你可以处理youtube播放器事件......

Answer 3

如果您只使用1个iframe，并且只包含几个包含iframe的src目标的链接，则可以更改iframe的src属性，如下所示：

$('.YoutubeLink').click(function(event){
    $('#myIframe').attr('src',$(this).attr('href'));
});