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

我的

“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>

---

您可以使用Youtube JS API

---

使用它，您可以处理youtube播放器事件…

如果您只使用1个iframe，并且在两侧有几个链接，其中包含iframe的src目标，您可以更改iframe的

src

属性，如下所示：

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

下面是我的JavaScript（不带jQuery）解决方案，它一次只允许播放一个YouTube视频

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

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

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

？enablejsapi=1&version=3&wmode=transparent

需要添加到每个链接才能访问API。我用yt\u视频类将视频包装在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中，我访问onyoutubeiframeapiredy（），以便控制玩家的行为。我在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();
});
}
}

var玩家=[]；
函数onyoutubeiframeapiredy（）{
var predefined_players=document.getElementsByClassName（“yt_视频”）[0].getElementsByTagName（'iframe'）；
对于（变量i=0；i

---

看

嗯，当我检查出来的时候，我没有什么可以用的。因此，我仍在不断地寻找实现这一目标的方法。但我应该感谢你的建议。：）