如何为YouTube iframe播放器添加循环播放及2分钟时长限制？

要实现视频循环播放，以及播放至2分钟时自动回到开头的功能，你可以通过以下修改完成：

关键改动点 #

• 在playerVars中添加循环配置：YouTube的loop参数需要配合playlist使用，playlist的值必须和videoId一致才能生效
• 监听视频播放时间更新事件，当播放到120秒（2分钟）时，强制跳转到视频开头
• 保留并完善播放状态监听，确保循环逻辑稳定

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
    </head>
  <body>
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>

<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', {
      width: '100%',
      videoId: 'osz5tVY97dQ',
      playerVars: { 
        'autoplay': 1, 
        'playsinline': 1,
        'loop': 1, // 开启循环
        'playlist': 'osz5tVY97dQ' // 必须与videoId一致，loop才会生效
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onTimeUpdate': onPlayerTimeUpdate // 监听播放时间更新
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
     event.target.playVideo();
  }

  // 监听播放状态变化，确保视频结束后自动重启（配合loop参数）
  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
      event.target.seekTo(0);
      event.target.playVideo();
    }
  }

  // 监听播放时间，当到达2分钟（120秒）时跳回开头
  function onPlayerTimeUpdate(event) {
    const currentTime = event.target.getCurrentTime();
    // 当播放时间超过或等于120秒时，跳转到开头
    if (currentTime >= 120) {
      event.target.seekTo(0);
      event.target.playVideo();
    }
  }
</script>
  </body>
</html>

代码说明 #

1. 循环播放配置：playerVars中的loop:1开启循环，但YouTube API要求必须同时设置playlist为当前视频ID，否则循环不会生效。
2. 时间监听逻辑：onPlayerTimeUpdate函数会持续检查当前播放时间，一旦达到120秒，就调用seekTo(0)跳转到视频开头并继续播放。
3. 播放状态兜底：onPlayerStateChange函数处理视频自然结束的情况，确保即使没有触发2分钟跳转，视频结束后也能自动重启循环。

内容的提问来源于stack exchange，提问作者Marcos Dias Carvalho