it-swarm.com.de

Youtube-iframe-Schleife funktioniert nicht

Ich habe versucht, den YouTube-Player-Demo zu verwenden, um den Code zu generieren, der für mein Video erforderlich ist, um automatisch zu spielen und sich selbst zu schleifen. Aber nur das Autoplay funktioniert entweder. Hier ist der Code, den ich verwendet habe.

<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>
42
Seal Blue

Fügen Sie den Parameter playlist zusammen mit der Schleife hinzu. Legen Sie für die Wiedergabeliste den Wert als aktuelle Video-ID fest.

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

Momentan funktioniert der Loop-Parameter nur im AS3-Player, wenn er zusammen mit dem Playlist-Parameter verwendet wird. Um ein einzelnes Video zu wiederholen, setzen Sie den Schleifenparameterwert auf 1 und den Wiedergabelistenparameterwert auf dieselbe Video-ID, die bereits in der Player-API-URL angegeben ist:

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

Referenz: https://developers.google.com/youtube/player_parameters#loop

102
K K

Die akzeptierte Antwort hat bei mir auch nicht funktioniert. Workaround für September 2018 (Bonus: Setzen Sie Breite und Höhe von CSS für #yt-wrap, anstatt es in JS hart zu codieren):

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

in playerVars.

Zum Beispiel einen vollständigen Code:

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

Ihr HTML-Code:

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

Wenn Sie das Video in einer Variablen behalten möchten, verwenden Sie Folgendes:

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

ich habe gerade herausgefunden: Sie benötigen Playlist = "", um die Schleife zu verwenden

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

1
Lana Đỗ

Verwenden Sie in react native so, dass Sie auch denselben Video-ID-Wert für die Wiedergabeliste verwenden.

wenn beispielsweise video id SpongeBOB ist, wird die URL folgendermaßen aussehen: 

https://www.youtube.com/embed/SpongeBOB? playlist = SpongeBOB & loop = 1

unten ist die Implementierung in reag native webview

<WebView
  javaScriptEnabled={true}
  domStorageEnabled={true}
  mediaPlaybackRequiresUserAction={true}
  style={{ height:180, width:300,alignSelf:"center",alignContent:"center"}}
  source={{uri: 'https://www.youtube.com/embed/qD101Xlc5uw?playlist=qD101Xlc5uw&loop=1' }}
 />
0
Abhiode