Youtube iframe“循环”不起作用

Posted 2023-02-24

【中文标题】Youtube iframe“循环”不起作用

【英文标题】：Youtube iframe "loop" doesn't work

【发布时间】：2014-11-04 23:03:54

【问题描述】：

我尝试使用YouTube player demo 生成视频自动播放和循环播放所需的代码。 但只有自动播放有效，它不循环播放，演示视频也无效。这是我使用的代码。

<iframe class="embed-responsive-item" id="ytplayer" type="text/html"   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>

【参考方案1】：

我刚刚发现你需要playlist="" 才能使用循环。

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

【参考方案2】：

您需要添加 https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1

注意播放列表 = VIDEO_ID 是强制性的，并且设置为单个视频的视频 ID

所以在我的情况下，网址是

https://www.youtube.com/embed/C5tG7pztlb0?playlist=C5tG7pztlb0&loop=1&autoplay=1&controls=1&showinfo=0&mute=1

静音已开启 显示信息已关闭 显示控件已关闭 自动播放已开启 循环开启

【参考方案3】：

这是另一个嵌入和循环播放列表的工作示例：

<iframe   src="https://www.youtube.com/embed/videoseries?list=PLDz-3V1_TIyhVYiJeGdqc9bjpAf9L9Zfq&amp;loop=1" frameborder="0" allow="accelerometer; autoplay " ;"="" =""="" encrypted-media;="" gyroscope;="" picture-in-picture"="" allowfullscreen=""></iframe>

【参考方案4】：

像这样在react native中使用，确保播放列表也使用相同的视频ID值。

例如，如果 视频 id 是 SpongeBOB 那么 url 将是这样的：

https://www.youtube.com/embed/海绵宝宝?playlist=海绵宝宝&loop=1

下面是react 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' 
 />

【讨论】：

这也适用于使用 iframe。注意：静音=1 参数是自动播放工作所必需的。

【参考方案5】：

接受的答案对我也不起作用。 2018 年 9 月的工作解决方法（奖励：通过 CSS 为 #yt-wrap 设置宽度和高度，而不是在 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>

【参考方案6】：

'playlist': '<?php echo $youtube_video ?>'

在 playerVars 中。

例如一个完整的代码：

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

您的 HTML 代码：

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

如果您想将视频保存在变量中，请使用：

<?php $youtube_video='C0DPdy98e4c';?>

【讨论】：

绝对是我想要的！效果很好，谢谢！

确认：使用YouTube iframe player API，这在 2021 年仍然有效

【参考方案7】：

尝试将playlist 参数与循环一起添加。对于播放列表，将其值设置为当前视频 id。

<iframe class="embed-responsive-item"id="ytplayer" type="text/html"   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>

目前，loop 参数仅在与 playlist 参数结合使用时才在 AS3 播放器中起作用。要循环播放单个视频，请将循环参数值设置为 1，并将播放列表参数值设置为已在 Player API URL 中指定的相同视频 ID：

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

参考：https://developers.google.com/youtube/player_parameters#loop

【讨论】：

感谢一百万次。那行得通。需要注意的是，现在您应该使用 & 而不是 &

非常感谢，在循环模式下只有一个视频可以完美运行