javascript - 如何允许在页面上只播放一个嵌入的 YouTube 视频？

Question

我的页面上有一些嵌入式 YouTube 视频:

            <div class="video_block">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4LaUVEF9GTs?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>

            <div class="video_block">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/JYZ_oP7QVSY?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>

如果用户在所有视频中都按下播放按钮，如何避免同时播放多个视频？感谢您提前提出任何建议或想法。

Answer 1

这是一个 YouTube 播放器管理器速写，您可以根据自己的需要进行调整。一些快速说明:

1. 您还可以使用 API 以编程方式嵌入每个 iframe。此示例假定 iframe 元素已在页面上。

2. 如果(与此示例一样)您使用已经嵌入的播放器，请确保将“?enablejsapi=1”附加到嵌入 URL 的末尾。

3. 基本上，该管理器会跟踪已注册的视频。如果它检测到注册视频开始播放，它将暂停当前正在播放的任何其他注册视频。

API 引用:https://developers.google.com/youtube/iframe_api_reference

更新:将示例更改为使用 pauseVideo 与 stopVideo。

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 ytPlayerManager = (function YTPlayerManager() {
  var players = [],
      PLAYING = 1;

  function register(id) {
    players.push({
      id: id,
      player: makePlayer(id)
    });
  }

  function makePlayer(id) {
      return new YT.Player(id, {
        events: {
          'onStateChange': function(event) {
            if(event.data == PLAYING) {
              videoPlaying(id);
            }
          }
        }
      });
  }

  function videoPlaying(id) {
    players.forEach(function(item) {
      if(item.id !== id) {
        item.player.pauseVideo();
      }
    });
  }

  return { register };
})();

function onYouTubeIframeAPIReady() {
  ytPlayerManager.register('video1');
  ytPlayerManager.register('video2');
  ytPlayerManager.register('video3');
}