Question

我需要为我的网站制作一个视频页面，该视频页面必须包含来自youtube的视频（https://www.youtube.com/watch?v=bWPMSSsVdPk），在此视频结束后，我需要自动显示第二个视频（https://www.youtube.com/watch?v=0afZj1G0BIE）和{ {1}}与班级div

到目前为止，这是我的代码：

content

Answer 1

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

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

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

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

最后，将 自动播放 参数设置为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自动启动另一个视频

3 个答案: