Ottieni più video YouTube incorporati per riprodurre automaticamente in sequenza

Question

C'è un modo semplice per avere più video YouTube incorporati su una pagina e farli iniziare a giocare non appena la pagina viene aperta e quando il primo termina avere il secondo avvio ?

Speravo qualcosa di simile a questo dovrebbe funzionare:

<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> 

E lo fa per il primo ma non il secondo. Immagino che potrei aver bisogno di immergermi nell'API. Qualcuno ha dei suggerimenti?

Answer 1

Utilizzando l'API IFrame di Youtube, è possibile farlo facilmente.

L'unica parte che è necessario configurare qui è la matrice di ID di youtube. È possibile recuperare quelli dalla parte dopo la/v/nella URL (Se necessario, è possibile modificare il javascript per caricare gli URL al posto di ID. Mi piace questo modo migliore.

<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> 

Answer 2

Non sono bravo in javascript. Ma ho qualche domanda simile prima.

you could referece

giudizio il primo video è finito quindi eseguire il secondo. potresti impostare 2 funzioni.

<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> 

poi

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 

      } 
     } 

speranza questo potrebbe aiutare voi e scrivere del codice più bello, grazie.

Answer 3

Ecco un esempio utilizzando il YouTube Iframe Player API

ci sono due incorpora separati (player1 e Player2) I video viene riprodotto automaticamente quando player1 è stato caricato, e comincia player2 quando completa

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

e il codice:...

<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> 

Answer 4

Utilizzare l'API di youtube e inserire true autoplay; creare aplaylist su youtube e fornire il collegamento.

Answer 5

In base al codice di esempio precedente. Ho creato Basic Youtube JavaScript Player di Vanilla- con playlist. Acquista 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>