Javascript 使YouTube api在第一个视频结束时自动启动另一个视频

我需要为我的网站制作一个视频页面，其中必须包含来自youtube（）的视频，并且在该视频结束后，我需要自动显示第二个视频（）和带有类

内容的
div

这是我目前的代码：

<style>
  .content {
    display: none;
  }
</style>

<div class="content">
  <button>Show this button after first video ends</button>
</div>

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>
<script>
  // create youtube player
  var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'bWPMSSsVdPk',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  // autoplay video
  function onPlayerReady(event) {
      event.target.playVideo();
  }
  // when video ends
  function onPlayerStateChange(event) {        
      if(event.data === 0) {          
          alert('done');
      }
  }
</script>


.内容{
显示：无；
}
在第一个视频结束后显示此按钮
//创建youtube播放器
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'BWPMSSVDPK'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
//自动播放视频
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
//视频结束时
函数onPlayerStateChange（事件）{
如果（event.data==0）{
警报（“完成”）；
}
}
对于如何使用Youtube iframe Player API提供的一组可用参数来实现这一点，没有直接的方法。但是你可以试着这样做


创建要按相同顺序连续播放的视频的播放列表
在RESTAPI调用中，将listType参数设置为playlist
检索该特定播放列表的播放ID

http://www.youtube.com/embed?listType=playlist&list=PLPLAYLISTID


最后，将自动播放参数设置为1，以便自动播放播放列表中的视频

我找到了一个解决方案，但第二个视频的声音似乎也与第一个视频同时播放

<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);
      $('.second-video').fadeIn();
    });
  }
  // when video ends
  function onPlayerStateChange(event) {
    if(event.data === 0) {
      $('.first-video').hide(3000);
      $('.second-video').fadeIn();
    }
  }

</script>


.第二段视频{
显示：无；
}
&时代；
//创建youtube播放器
var播放器；
var-player2；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'qCDxEif_9js'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
player2=新的YT.Player（'player2'{
高度：“390”，
宽度：“640”，
videoId:'43jHG-yH9Gc'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
//自动播放视频
函数onPlayerReady（事件）{
event.target.playVideo（）；
$（'.close'）。单击（函数（）{
$（'.first video'）.hide（3000）；
$（'.second video'）.fadeIn（）；
});
}
//视频结束时
函数onPlayerStateChange（事件）{
如果（event.data==0）{
$（'.first video'）.hide（3000）；
$（'.second video'）.fadeIn（）；
}
}

这将在你的第一个视频之后播放你的下一个视频。然而，这也会调用playVideo（），这对于任何在苹果移动设备上观看的人来说都是一个问题。考虑使用CuvEdEdiById（）代替。
你可以尝试用这2个视频加载播放列表，并让它自动播放到播放列表中的第二个视频。
function onPlayerStateChange(event) {        
      if(event.data === 0) {          
          event.target.loadVideoById("0afZj1G0BIE");
      }
  }