Lecteur Youtube api avec boucle

J'ai du mal avec la mise en place de la boucle pour des vidéos youtube à l'aide de youtube player api.

Le problème est que la vidéo n'est pas en cours d'exécution en vertu d'une 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.Aussi est-il un moyen pour supprimer le partage et le titre de la vidéo à partir du haut de la vidéo.

Merci d'avance.

InformationsquelleAutor Prithviraj Mitra | 2013-10-16
  1. 44

    Si la vidéo n'est pas de changer, il vous suffit de faire 

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

    Cela permettra d'éviter unnecisarily le rechargement de la vidéo

    • +1 pour l'approche ci-dessus, car il sera immédiatement la lecture de la vidéo éviter le clignotement rapide de l'écran noir qui arrive quand on utilise le "&playlist=VIDEO_ID" proposé par Google
    • Excellente solution. Juste pour info vous pouvez également lire les vidéo comme ça e.target.playVideo() pour le rendre un peu plus dynamique.
    • Si pour une raison quelconque (j'.e avec le module externe ) vous ne pouvez pas obtenir l'accès à la variable YT et ses propriétés YT.PlayerState.CLOS est (au moment de l'écriture) 0, de sorte que vous pouvez la remplacer par 0 .
    InformationsquelleAutor DanielM
  2. 11

    C'est ce que j'ai utilisé pour l'API IFrame vidéo en boucle. J'ai remarqué que vous devez inclure "liste de lecture:VIDEO_ID" paramètre. et il fonctionne. C'est mon exemple

    HTML:

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

    InformationsquelleAutor Ayman
  3. 10

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

    Vous allez vouloir l' showinfo paramètre pour masquer le titre, etc.

    • Le problème de cette méthode est qu'il se charge de même de la vidéo à nouveau comme une nouvelle vidéo.
    • Manquer cette. Je ne peux pas vérifier maintenant, mais ce ne serait pas un problème tant que le navigateur doit avoir la vidéo en cache/chargé à partir de la lecture précédente?
    InformationsquelleAutor Andrew Dinmore
  4. 10

    Essayer dans votre onPlayerStateChange, dans une sorte de façon de Youtube veut vous mettre dans le videoID de nouveau.

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

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

    J'ai eu ce travail pour me donner de la boucle de la vidéo avec super faible volume défini pour la lecture de la vidéo. Vous pouvez désactiver en modifiant le volume de 2 à 0.

    Assurez-vous également que votre vidéo est ajouté à une liste de lecture. Apparemment c'est un problème maintenant. Et l'utilisation de la vidéo id dans les deux playlist et videoid zones dans le code.

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

    Je sais juste que cela fonctionne.

        <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>
    InformationsquelleAutor Shonn Piersol
  6. 0

    De travail de boucle exemple (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>
    • Bonjour, et merci pour le partage de réponse. En général, les gens sont à la recherche d'explications, pas de code. Peut-être essayer d'élargir votre réponse avec une certaine idée de pourquoi votre suggestion et/ou de ce qu'ils ont fait de mal pour commencer.
    InformationsquelleAutor Nucleon