2013-10-16 27 views
13

Sto lottando con l'impostazione del ciclo per i video di YouTube utilizzando YouTube Player API.YouTube player api con loop

Il problema è che il video non è in esecuzione in un ciclo.

Ecco il mio codice

var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 


     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 

      playerVars: { 
      'controls': 0,   
      'showinfo': 0, 
      'rel': 0, 
      'loop': 1 

      }, 
      videoId: 'qzZuBWMnS08', 
      events: { 
      'onReady': onPlayerReady, 
      // 'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 
function onPlayerReady(event) { 
     // event.target.setLoop(true); 
     event.target.playVideo(); 
     } 

Il loop: 1 non sembra essere working.Also esiste un modo per rimuovere la condivisione e il titolo video dalla parte superiore del video.

Grazie in anticipo.

risposta

10

Come indicato nello documentation, è necessario impostare il parametro playlist sull'ID video affinché il ciclo funzioni.

ti verrà voglia il parametro showinfo per nascondere il titolo ecc

+1

Il problema di questo metodo è che si carica di nuovo lo stesso video come un nuovo video. –

+0

Manca questo. Non posso controllare ora, ma non sarebbe un problema poiché il browser dovrebbe avere il video memorizzato nella cache/caricato dalla riproduzione precedente? –

9

Prova questo nella vostra onPlayerStateChange, in una sorta di modo Youtube vuole a mettere di nuovo in videoID.

onStateChange: function(e){ 
    var id = 'qzZuBWMnS08'; 

    if(e.data === YT.PlayerState.ENDED){ 
     player.loadVideoById(id); 
    } 
} 
33

Se il video non sta cambiando, si può solo fare

onStateChange: 
    function(e){ 
     if (e.data === YT.PlayerState.ENDED) { 
      player.playVideo(); 
     } 
    } 

Questo impedirà unnecisarily ricaricare il video

+0

+1 per l'approccio sopra perché riprodurrà immediatamente il video evitando il flash rapido dello schermo nero che si verifica quando si utilizza "& playlist = VIDEO_ID" suggerito da [Google] (https://developers.google.com/youtube/ player_parameters) – Filtermusic

9

Questo è quello che ho usato per l'API IFrame video loop. Ho notato che devi includere il parametro "playlist: VIDEO_ID". e funziona Questo è il mio esempio

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

 
    // Replace the 'ytplayer' element with an <iframe> and 
 
    // YouTube player after the API code downloads. 
 
    var player; 
 

 
    function onYouTubePlayerAPIReady() { 
 
    player = new YT.Player('ytplayer', { 
 
     height: '390', 
 
     width: '640', 
 
     videoId: 'VIDEO_ID', 
 
     playerVars: { 
 
     playlist: 'VIDEO_ID', 
 
     loop: 1 
 
     } 
 
    }); 
 
    } 
 
</script>

Problemi correlati