獲取多個嵌入式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視頻以自動播放順序

回答

相關問題