让嵌入式 YouTube 视频自动播放和循环播放

Posted 2023-02-24

【中文标题】让嵌入式 YouTube 视频自动播放和循环播放

【英文标题】：Getting an Embedded YouTube Video to Auto Play and Loop

【发布时间】：2012-10-14 00:19:17

【问题描述】：

我正在尝试让基本的 Youtube 视频自动播放并自动循环嵌入页面，但我没有运气。

<div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:1120px; height:630px;" data="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object></div>

【问题讨论】：

你有没有看developers.google.com/youtube/player_parameters

重复***.com/questions/7281765/…

这不是我遇到问题的自动播放，实际上是循环播放。抱歉，我应该澄清一下。

我希望看到一个选项，如果我们没有前景焦点上的选项卡/窗口，它不会停止循环。

【参考方案1】：

YouTube 的 html5 嵌入代码：

<iframe   src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>​

您可以在此处阅读：Link 查看 Internet 存档项目的原始内容。

【讨论】：

但是视频每次都会重新加载，我怎样才能防止它像 www.kolor.com 一样，即使您在第一次自动重播后关闭了互联网，视频也会继续播放？

是的，我也有同样的问题，是否有这样的循环？（即使在离线模式下也会继续）

在 2020 年可以使用，但需要将参数播放列表重命名为列表，请参阅@tarik 的回答

【参考方案2】：

这是YouTube embedded player parameters的完整列表。

相关信息：

自动播放（支持的播放器：AS3、AS2、HTML5）值：0 或 1。默认值 为 0。设置初始视频是否自动播放。 播放器加载。

loop（支持的播放器：AS3、HTML5） 值：0 或 1。默认为 0。在 对于单个视频播放器，设置为 1 将导致 播放器一次又一次地播放初始视频。在一个 播放列表播放器（或自定义播放器），播放器将播放整个 播放列表，然后从第一个视频重新开始。

注意：此参数在 AS3 播放器和 IFrame 嵌入，可以加载 AS3 或 HTML5 播放器。 目前loop参数只在AS3播放器中使用时有效 结合播放列表参数。要循环播放单个视频， 将循环参数值设置为 1 并设置播放列表参数值 到 Player API URL 中已指定的相同视频 ID：

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

在您的嵌入代码中使用上面的 URL（也附加其他参数）。

【讨论】：

谢谢。将 videoid 添加到播放列表有助于我一次又一次地循环播放相同的视频。

@Vadimo 参数仍然存在于文档中......我不明白为什么它“不再”工作了

【参考方案3】：

有同样的经历，但是对我来说神奇的是不要将 embed 更改为 v。

所以代码将如下所示...

<iframe   src="https://www.youtube.com/embed/cTYuscQu-Og?Version=3&loop=1&playlist=cTYuscQu-Og" frameborder="0" allowfullscreen></iframe>

希望对你有帮助...

【参考方案4】：

所有答案都对我不起作用，我检查了播放列表 URL 并看到播放列表 参数更改为列表！所以应该是：

&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs

这是我用来制作干净、循环、自动播放视频的完整代码：

<iframe   src="https://www.youtube.com/embed/MavEpJETfgI?autoplay=1&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>

【讨论】：

在您的示例中，列表参数与视频 ID 不同。对吗？

这在 2021 年有效！太棒了！

【参考方案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>