如何允许在页面上只播放一个嵌入的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');
}

Answer 2

您需要使用youtube api对视频的完全控制，并且可以生成视频。

这样，如果有人在玩，您就可以阻止其他人

状态改变时

每当玩家的状态发生变化时就会触发此事件。API 传递给事件侦听器函数的事件对象的 data 属性将指定与新玩家状态相对应的整数。可能的值为：

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).

当播放器第一次加载视频时，它将广播一个未开始（-1）事件。当视频被提示并准备好播放时，播放器将广播视频提示 (5) 事件。在代码中，您可以指定整数值，也可以使用以下命名空间变量之一：

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED

例子 ：

window.onYouTubePlayerAPIReady = function(){
        var player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }


 function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }

源代码在这里

我希望它会有所帮助