web-dev-qa-db-fra.com

Youtube iframe "loop" ne fonctionne pas

J'ai essayé d'utiliser la démo du lecteur YouTube pour générer le code nécessaire à la lecture automatique de la vidéo et la boucle elle-même . Mais seule la lecture automatique fonctionne, elle ne fonctionne pas en boucle et la vidéo de démonstration ne fonctionne pas. non plus. Voici le code que j'ai utilisé.

<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>
</iframe>
htmliframeyoutube
42
Seal Blue

Essayez d’ajouter le paramètre playlist à la boucle. Pour la liste de lecture, définissez sa valeur comme identifiant vidéo actuel.

<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=M7lc1UVf-VE"
      frameborder="0" allowfullscreen></iframe>

Actuellement, le paramètre de boucle ne fonctionne que dans le lecteur AS3 lorsqu'il est utilisé conjointement avec le paramètre de liste de lecture. Pour boucler une seule vidéo, définissez la valeur du paramètre loop sur 1 et définissez la valeur du paramètre playlist sur le même ID vidéo que celui spécifié dans l'URL de l'API du lecteur:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Référence: https://developers.google.com/youtube/player_parameters#loop

102
K K

La réponse acceptée n'a pas fonctionné pour moi non plus. Solution de contournement de travail pour septembre 2018 (bonus: définir largeur et hauteur par CSS pour #yt-wrap au lieu de le coder en dur dans JS):

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads 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);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 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.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
2
LuH
'playlist': '<?php echo $youtube_video ?>'

à l'intérieur de playerVars.

Par exemple un code complet:

<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:'100%',
          width: '100%',
          fitToBackground: true,  
          videoId: '<?php echo $youtube_video ?>',
          playerVars: { 
              'autoplay': 1, 
              'controls': 0,
              'autohide':1,
              'enablejsapi':1,
              'loop':1, 
              'disablekb':1, 
              'fs': 0, 
              'modestbranding': 0, 
              'showinfo': 0, 
              'color': 'white', 
              'theme': 'light', 
              'rel':0  ,
              'playlist': '<?php echo $youtube_video ?>'
          },
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
        player.setVolume(0);
        //player.setSize(1920, 1080);
        player.setLoop(true);
        player.setPlaybackQuality('hd1080');
      }

Votre code HTML:

<div id="player"></div>

Si vous voulez conserver la vidéo dans une variable, utilisez ceci:

<?php $youtube_video='C0DPdy98e4c';?>
1
Zakir Sajib

je viens de comprendre: vous devez avoir playlist = "" pour utiliser la boucle

src = "https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder = "0" allowfullscreen>

1
Lana Đỗ