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

我更新了你的 fiddle http://jsfiddle.net/yjrx8uyz/3/

基本上，您必须检查哪个玩家触发了就绪事件和关闭事件。

if(event.target == player)

引用:How to detect when a youtube video finishes playing?