让 YouTube api 在第一个视频结束时自动开始另一个视频

Question

我需要为我的网站制作一个视频页面，其中必须包含来自 youtube (https://www.youtube.com/watch?v=bWPMSSsVdPk) and after this video ended I need to automatically display a second video (https://www.youtube.com/watch?v=0afZj1G0BIE) 的视频以及 div 和 class 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>

Answer 1

对于如何使用 Youtube iframe Player API 具有的可用参数集来执行此操作，没有直接的方法。但是你可以尝试这样做。

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

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

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

最后，将autoplay参数设置为1，这样播放列表中的视频就会自动播放。

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

Answer 3

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

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

让 YouTube api 在第一个视频结束时自动开始另一个视频

Make YouTube api automatically start another video when first video ended

html

javascript

youtube-api