Question

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

＆＃13;

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

＆＃13;

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

Answer 1

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

您还可以使用API以编程方式嵌入每个iframe。此示例假定iframe元素已在页面上。
如果（与此示例一样）您使用已嵌入的播放器，请确保在嵌入网址的末尾添加“？enablejsapi = 1”。
本质上，这位经理会跟踪已注册的视频。如果它检测到已注册的视频开始播放，则会暂停当前播放的任何其他已注册视频。

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来完全控制视频，然后才能生成视频。

所以如果正在玩

，你将能够阻止其他人

onStateChange

只要玩家的状态发生变化，此事件就会触发。 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;
    }
  }

src是here

我希望它会有所帮助

Answer 3

如果您嵌入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视频？

3 个答案: