web-dev-qa-db-fra.com

Lecteur Youtube api avec boucle

Je me bats avec la configuration de la boucle pour les vidéos youtube en utilisant l’application de lecteur youtube.

Le problème est que la vidéo ne tourne pas en boucle.

Voici mon code

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();
      }

La boucle: 1 ne semble pas fonctionner.Il existe également un moyen de supprimer le partage et le titre de la vidéo en haut de la vidéo.

Merci d'avance.

videoyoutubeyoutube-javascript-api
17
Prithviraj Mitra

Si la vidéo ne change pas, vous pouvez simplement faire 

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

Cela évitera de recharger inutilement la vidéo

42
DanielM

C'est ce que j'ai utilisé pour la boucle vidéo API IFrame. J'ai remarqué que vous devez inclure le paramètre "playlist: VIDEO_ID". et il fonctionne. Ceci est mon exemple

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

11
Ayman

Essayez ceci dans votre onPlayerStateChange , d’une manière ou d’une autre, Youtube souhaite que vous ajoutiez l’identifiant vidéo.

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

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

Comme indiqué dans documentation , vous devez définir le paramètre playlist sur l'ID de la vidéo pour que la boucle fonctionne.

Vous voudrez que le paramètre showinfo masque le titre, etc.

10
Andrew Dinmore

Cela a fonctionné pour me donner une vidéo en boucle avec un volume très faible défini pour la lecture de vidéo. Vous pouvez désactiver le son en modifiant le volume de 2 à 0. 

Assurez-vous également que votre vidéo est ajoutée à une liste de lecture. Apparemment, c'est un problème maintenant. Et utilisez l'identifiant vidéo dans les zones de liste de lecture et videoid du code.

Je suis sûr que j'ai des étapes supplémentaires ou des étapes redondantes comme im pas de codeur. 

Je sais juste que ça marche.

    <div id="player">
<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_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 onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '600',
          videoId: 'DrrH-YTvVVc',
          playerVars: {
          playlist: 'DrrH-YTvVVc',
          loop: 1      }       ,
   events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
           event.target.setVolume(2);
       event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = true;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
    //      setTimeout(stopVideo, 6000);
                  player.playVideo();
        }
           event.target.setVolume(2);
      }
</script></div>
3
Shonn Piersol

Exemple de boucle de travail (02-2019)

<div id="ytplayer">
<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '640',
      height: '360',

          // 1. Video_Id
          videoId: 'AfAwsdbj04I',

      playerVars: { 
          autoplay: 1,
          loop: 1,
          controls: 0,
          rel: 0,
          modestbranding: 1,

          // 2. Playlist_Id (don't forget "PL")
          playlist: 'PLxWQS97ZR2-_c2eqKxSHxEu7v462-qnYM'

      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    event.target.setVolume(80);
    event.target.playVideo();
 //  player.mute();
  }
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
</div>
0
Nucleon