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

Make YouTube api automatically start another video when first video ended

本文关键字：视频 开始 另一个 播放 结束 YouTube API 第一个      更新时间：2023-09-26

我需要为我的网站制作一个视频页面，其中包含来自youtube的视频(https://www.youtube.com/watch?v=bWPMSSsVdPk(，在此视频结束后，我需要自动显示第二个视频(https://www.youtube.com/watch?v=0afZj1G0BIE(和带有类content的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>

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

<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 iframe Player API具有的可用参数集来做到这一点。但是你可以尝试这样做。

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

  • 检索该特定播放列表的播放列表 ID。

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

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

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

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

相关文章：