YouTube API同时启动两个视频

Question

我有两个视频与YouTube api控制，一切工作正常，除了当页面加载第一个视频开始(这是正常的)，但在同一时间你可以听到第二个视频的声音(这必须在第一个视频结束后开始或手动关闭)，这可以更好地听到，如果你暂停第一个视频…有人有解决办法吗?

我认为这是因为两个视频都调用了onReady事件。

必须在第一个视频结束或关闭时自动开始第二个视频。

<style>
   .second-video {
      display: none;
   }
</style>
<div class="video-site">
  <div class="first-video">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div id="player"></div>
  </div>
  <div class="second-video">
    <div id="player2"></div>
  </div>
</div>
<script src="http://www.youtube.com/player_api"></script>
<script>
  // create youtube player
  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'qCDxEif_9js',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
    player2 = new YT.Player('player2', {
      height: '390',
      width: '640',
      videoId: '43jHG-yH9Gc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  // autoplay video
  function onPlayerReady(event) {
    event.target.playVideo();
    $('.close').click(function(){
      $('.first-video').hide(3000);
      event.target.stopVideo();
      $('.second-video').fadeIn();
    });
  }
  // when video ends
  function onPlayerStateChange(event) {
    if(event.data === 0) {
      $('.first-video').hide(3000);
      $('.second-video').fadeIn();
    }
  }
</script>

http://jsfiddle.net/yjrx8uyz/

Answer 1

我更新了你的小提琴http://jsfiddle.net/yjrx8uyz/3/

基本上你必须检查哪个玩家触发了ready事件和closing事件。

if(event.target == player)

Ref:如何检测何时youtube视频结束播放?