当第一个视频结束时，让 YouTube api 自动开始另一个视频答案

【问题标题】：Make YouTube api automatically start another video when first video ended当第一个视频结束时，让 YouTube api 自动开始另一个视频
【发布时间】：2016-01-21 15:15:58
【问题描述】：

我需要为我的网站制作一个视频页面，该页面必须包含来自 youtube 的视频 (https://www.youtube.com/watch?v=bWPMSSsVdPk)，并且在该视频结束后，我需要自动显示第二个视频 (https://www.youtube.com/watch?v=0afZj1G0BIE) 和带有类的 div content

这是我目前的代码：

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

【问题讨论】：

您可以尝试加载包含这两个视频的播放列表，并让它自动转到播放列表中的第二个视频。

标签： javascript html youtube-api

【解决方案1】：

function onPlayerStateChange(event) {        
      if(event.data === 0) {          
          event.target.loadVideoById("0afZj1G0BIE");
      }
  }

这将在您的第一个视频之后播放您的下一个视频。但是，这也会调用 playVideo()，这对于在 Apple 移动设备上观看的任何人来说都是一个问题。考虑改用 cueVideoById()。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

对于如何使用 Youtube iframe Player API 拥有的可用参数集，没有直接的方法可以做到这一点。但是你可以尝试这样做。

为要以相同顺序连续播放的视频创建一个播放列表。
在 REST API 调用中，将 listType 参数设置为 playlist。

检索该特定播放列表的 playlistID。

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

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

【讨论】：