如何在不链接到播放列表的情况下播放两个Youtube视频?

时间:2011-02-09 21:42:01

标签: javascript iframe youtube

我对Javascript很新。我在这里嵌入了一个youtube iframe: http://www.heartlandpokertour.com/indexbeta.php

使用此文档: http://code.google.com/apis/youtube/iframe_api_reference.html

我希望在完成第一个视频之后播放第二个视频。如果我尝试将视频ID链接/设置为Youtube播放列表,则无法设置特定的视频参数。

我假设我需要设置一个事件监听器和函数,以便在广播YT.PlayerState.ENDED(或0)时触发,但是没有IDEA如何执行此操作。

更新:这是我正在为播放器使用的当前代码:

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '258',
      width: '406',
      videoId: 'MsTQNZmq5Pk',
      playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
      events: {
        'onStateChange': onPlayerStateChange,
      }
    });
  }

  // 4. The API will call this function when the video player is ready.     
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
        player.stopVideo();
        player.videoId = 'c5dTlLk5_x8';
        player.playVideo();
        }
    }


</script>

2 个答案:

答案 0 :(得分:2)

在api网站的第一个代码清单中,此活动可能会对您有所帮助:

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }

你可以把它改成这样的东西(我不敢测试):

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.stopVideo();
      player.videoId = 'some id';
      player.playVideo();
    }
  }

这在我看来是最符合逻辑的,但是我不确定是否可以在一个播放器实例中播放不同的视频。我从来没有碰到你的情景我害怕。


修改:您可以尝试创建播放器的新实例。所以基本上你只需创建一个新的播放器,它将播放第二个视频:

 function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.stopVideo();

      player = new YT.Player('player', {
         height: '258',
         width: '406',
         videoId: 'some id',
         playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
         events: {
           //'onStateChange': onPlayerStateChange, // not add this line because it would again create a new player after the second has stopped I guess!
         }
      });

      player.playVideo();
    }
  }

答案 1 :(得分:1)

我已在我的网站上运行此功能,首先您可以停止播放当前视频,然后使用Youtube API中的loadVideoById()函数加载新视频

 function swapVideo() {     
    player.stopVideo();
    player.loadVideoById(youtube_id);
 }