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

【问题标题】：Allow only one YouTube video in the same page with jQuery使用 jQuery 在同一页面中只允许一个 YouTube 视频
【发布时间】：2014-01-27 00:16:18
【问题描述】：

我的"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>

【问题讨论】：

标签： javascript jquery video youtube

【解决方案1】：

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

DEMO。

首先，您需要添加一个 Youtube API，只需将脚本添加到您的 HTML 页面：

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

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

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

需要添加到每个链接才能访问 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 中我访问 onYouTubeIframeAPIReady() 以便我可以控制玩家的行为。我遍历 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。

【讨论】：

【解决方案2】：

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

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

【讨论】：

好吧，当我检查它们时，没有什么可以使用的。所以我还是一直在寻找方法。但我应该感谢你的建议。 :)

【解决方案3】：

如果您只使用 1 个 iframe，并且在侧面只有几个包含 iframe 的 src 目标的链接，您可以像这样更改 iframe 的 src 属性：

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

【讨论】：