Javascript 如何允许在页面上只播放一个嵌入式YouTube视频？

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

---

您需要使用

youtube api

对视频进行完全控制，并可以生成视频

因此，如果有人在玩，你可以阻止其他人

状态变化

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

-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;
    }
  }

src是

---

我希望这会有帮助

这里有一个快速的YouTube播放器管理器草图，您可以根据自己的需要进行调整。下面是几个简短的提示：

还可以使用API以编程方式嵌入每个iframe。本例假设iframe元素已经在页面上

如果（如本例所示）使用已嵌入的播放器，请确保在嵌入URL的末尾附加“？enablejsapi=1”

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

API参考：

更新： 将示例更改为使用pauseVideo vs.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');
}

---

如果以HTML形式嵌入，请尝试以下操作：

<div style="text-align: center; margin: auto">
<iframe width="640" height="360" src="http://www.youtube.com/embed/abdcefg? 
    border=1&amp; rel=0&amp; showsearch=0&amp; version=3&amp;
    modestbranding=1&amp; fs=1" frameborder="0" allowfullscreen>
</iframe>
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="false" />
</div>

---

希望这有帮助……

为什么不让一个播放器显示视频的大拇指呢？这样一次只能播放一个视频。。。如果你查看YouTube API，你可以完全控制播放器。你使用的是通常的iFrame，没有yt播放器API。默认情况下，iFrame是沙盒的。因此，除非你选择postmessage API？autoplay=1自动播放视频？autoplay=0，否则无法直接知道视频的状态，你必须点击play。我有同样的问题，我有多个视频在一个页面上，我想只允许一个播放。页面是为孩子们准备的，所以我可以预期他们中的一些人在播放另一个视频之前不会知道他们必须暂停视频。重复这个吗？（有悬赏时不能投票关闭）