获取多个嵌入式Youtube视频以自动播放顺序

是否有任何简单的方法可以在页面上嵌入多个嵌入式YouTube视频，并在页面打开后立即开始播放，以及第一个播放完成后第二个开始播放？获取多个嵌入式Youtube视频以自动播放顺序

我希望像这样的工作：

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object> 
<br> 
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

而且它的第一个而不是第二。我想我可能需要深入API。任何人有任何建议？

来源

2013-03-04 clifgray

你为什么不只是添加所有这些影片在YouTube播放列表，并嵌入您的网站的播放列表。当第一个视频结束时，下一个将开始:) – Patrick 2015-07-16 12:43:45

使用Youtube IFrame API，您可以轻松完成此操作。

您需要在这里配置的唯一部分是youtube ID数组。你可以检索/那些从零件/ v后面的URL（如果需要，您可以修改JavaScript加载的URL，而不是ID的。我就是这样的方式更好。

<div id="player"></div> 
<script src="//www.youtube.com/iframe_api"></script> 

<script> 
    /** 
    * Put your video IDs in this array 
    */ 
    var videoIDs = [ 
     'OdT9z-JjtJk', 
     'NlXTv5Ondgs' 
    ]; 

    var player, currentVideoId = 0; 

    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '350', 
      width: '425', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerReady(event) { 
     event.target.loadVideoById(videoIDs[currentVideoId]); 
    } 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.ENDED) { 
      currentVideoId++; 
      if (currentVideoId < videoIDs.length) { 
       player.loadVideoById(videoIDs[currentVideoId]); 
      } 
     } 
    } 
</script>

来源

2013-03-09 03:00:20

好吧太棒了！谢谢您的帮助。现在有什么办法可以让他们在单独的球员中进行表演并连续进行？ – clifgray 2013-03-09 15:59:35

也许我误解了确切的要求 - 你希望它们全部显示在屏幕上吗？然后一个接一个地玩？这样你仍然可以看到每个的缩略图/完成屏幕？如果是这样，则略有不同 - 您只需将所有播放器的ID作为videoIDs对象的键 - 并循环播放。如果您需要帮助，请准确澄清您的想法 - 我会帮忙的。 – 2013-03-10 03:05:29

谢谢Aaron。是的，这正是我想要做的。我想让所有的玩家都在屏幕上，并通过它们循环播放。这是因为用户可以通过点击一个新玩家来改变视频。 – clifgray 2013-03-10 05:52:57

我不擅长JavaScript。但我之前有类似的问题。

you could referece

判定所述第一视频结束然后运行第二个。你可以设置2个功能。

<div id="player1"></div> 
<br> 
<object width="425" height="350"><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350" id="player2-embed"></embed></object>

然后

function onPlayerStateChange(event) {   
      if(event.data === 0) {   
       $('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery 
       $('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery 

      } 
     }

希望这可以帮助你编写一些代码更好，谢谢。

来源

2013-03-08 12:23:23

下面是一个例子使用YouTube Iframe Player API

有两个独立的嵌入功能（PLAYER1和player2）时PLAYER1加载视频自动播放，而且它完成时，它开始player2

Here is the jfiddle if you want to play around with it.

和代码：。

<div id="player1"></div> 
<div id="player2"></div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "//www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player1; 
    var player2; 

    function onYouTubeIframeAPIReady() { 
     player1 = new YT.Player('player1', { 
      height: '350', 
      width: '425', 
      videoId: 'OdT9z-JjtJk', 
      events: { 
       'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
      } 
     }); 
     player2 = new YT.Player('player2', { 
      height: '350', 
      width: '425', 
      videoId: 'NlXTv5Ondgs' 
     }); 
    } 

    function onPlayerReady(event) { 
     event.target.playVideo(); 
    } 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.ENDED) { 
      player2.playVideo(); 
     } 
    } 
</script>

来源

2013-03-10 02:19:20

使用youtube API并将自动播放功能设置为true;在youtube上制作aplaylist并给出链接。

来源

2013-03-15 07:13:22 Nishank

基于prev示例代码。我创建了基本的香草JavaScript Youtube播放器 - 播放列表。结帐Youtube Player- With playlist

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Basic Vanilla JavaScript Youtube Player- With playlist</title> 
 
</head> 
 
<body> 
 
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;"> 
 
    <div id="youtube" style="width: 100%;height: 100%"></div> 
 
    <div class="controls" style="text-align: center;margin: 0 auto;"> 
 
     <button style="padding: 10px;width: 100px;background-color: #167AC6;" 
 
       onclick="YouTubePlayer.playPrevious()">Prev 
 
     </button> 
 
     <button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;" 
 
       onclick="YouTubePlayer.playNext()">Next 
 
     </button> 
 
    </div> 
 
</div> 
 
<script src="//www.youtube.com/iframe_api"></script> 
 
<script> 
 
    var YouTubePlayer = { 
 
     current: 0, 
 
     player: null, 
 
     /** 
 
     * Tracks ids here... 
 
     */ 
 
     videos: [ 
 
      'vQMnaDNw5FQ', 
 
      'Dp6lbdoprZ0', 
 
      'OulN7vTDq1I' 
 
     ], 
 
     currentlyPlaying:function(){ 
 
      console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]); 
 
      return YouTubePlayer.videos[YouTubePlayer.current]; 
 
     }, 
 
     playNext: function() { 
 
      YouTubePlayer.increaseTrack() 
 
      if (YouTubePlayer.player) { 
 
       YouTubePlayer.currentlyPlaying(); 
 
       YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]); 
 
      } else { 
 
       alert('Please Wait! Player is loading'); 
 
      } 
 
     }, 
 
     playPrevious: function() { 
 
      YouTubePlayer.decreaseTrack() 
 
      if (YouTubePlayer.player) { 
 
       YouTubePlayer.currentlyPlaying(); 
 
       YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]); 
 
      } else { 
 
       alert('Please Wait! Player is loading'); 
 
      } 
 

 
     }, 
 
     increaseTrack: function() { 
 
      YouTubePlayer.current = YouTubePlayer.current + 1; 
 
      if (YouTubePlayer.current >= YouTubePlayer.videos.length) { 
 
       YouTubePlayer.current = 0; 
 
      } 
 
     }, 
 
     decreaseTrack: function() { 
 
      YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0); 
 
     }, 
 
     onReady: function (event) { 
 
      event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]); 
 
     }, 
 
     onStateChange: function (event) { 
 
      if (event.data == YT.PlayerState.ENDED) { 
 
       YouTubePlayer.playNext(); 
 
      } 
 
     } 
 
    } 
 
    function onYouTubeIframeAPIReady() { 
 
     YouTubePlayer.player = new YT.Player('youtube', { 
 
      height: '350', 
 
      width: '425', 
 
      events: { 
 
       'onReady': YouTubePlayer.onReady, 
 
       'onStateChange': YouTubePlayer.onStateChange 
 
      } 
 
     }); 
 
    } 
 
</script> 
 
</body> 
 
</html>

来源

2015-12-27 07:48:38 xdeepakv

获取多个嵌入式Youtube视频以自动播放顺序

回答

相关问题