如何用JavaScript遍历数组实现视频片段循环5次后切换？

给定如下HTML脚本：

<html>
<head>

<script>
var sentences= 
[
 ['journey27.mp4', 
  [
    [1, 2],
    [5, 7]
  ]
 ],
 ['journey28.mp4', 
  [
    [10, 12],
    [13, 17],
    [25, 36]
  ]
 ],
 ['journey30.mp4', 
  [
    [13, 15],
    [15, 19],
    [21, 30]
  ]
 ]
];

function playVideo(myUrl, startTime, endTime) { 
  var video = document.getElementById("myVideo");
  video.src = myUrl;
  video.currentTime=startTime;
  video.play();

  var maxTime = endTime;
  video.addEventListener("timeupdate", function(){
    if(video.currentTime >= maxTime){
     playVideo(myUrl, startTime, endTime);
    }
  }, false);
} 

function myLoop(){
  我需要将每个片段循环5次后再切换至下一个片段
}
</script>
</head>
<body>
<video id="myVideo" width="1000" height="800" controls autoplay loop>

  您的浏览器不支持video标签。
</video>

<br>
<a  onclick="myLoop()" > 播放 </a>

</body>
</html>

需求为：遍历数组中的每一组视频片段，将每个片段循环播放5次后，再切换至下一个片段。示例流程：

• 第一组：journey27.mp4，循环播放[1, 2]片段5次
• 接着：journey27.mp4，循环播放[5, 7]片段5次
• 接着：journey28.mp4，循环播放[10, 12]片段5次
• 接着：journey28.mp4，循环播放[13, 17]片段5次
• 以此类推

注意：上述playVideo函数可正常运行，需填充myLoop函数实现需求。

要实现这个需求，需要改造playVideo函数使其支持播放完成后的回调通知，同时在myLoop中维护当前的视频索引、片段索引和循环次数，通过回调逐步推进播放流程。

修改后的完整代码 #

<html>
<head>
<script>
var sentences= 
[
 ['journey27.mp4', 
  [
    [1, 2],
    [5, 7]
  ]
 ],
 ['journey28.mp4', 
  [
    [10, 12],
    [13, 17],
    [25, 36]
  ]
 ],
 ['journey30.mp4', 
  [
    [13, 15],
    [15, 19],
    [21, 30]
  ]
 ]
];

// 修改playVideo，添加播放完成的回调
function playVideo(myUrl, startTime, endTime, onComplete) { 
  var video = document.getElementById("myVideo");
  // 移除之前的timeupdate监听，避免重复绑定
  video.removeEventListener("timeupdate", video._timeupdateHandler);
  
  video.src = myUrl;
  video.currentTime = startTime;
  video.play();

  var maxTime = endTime;
  // 将监听函数存到video对象上，方便后续移除
  video._timeupdateHandler = function(){
    if(video.currentTime >= maxTime){
      video.pause();
      // 调用回调通知播放完成
      onComplete && onComplete();
    }
  };
  video.addEventListener("timeupdate", video._timeupdateHandler, false);
} 

function myLoop(){
  // 初始化遍历状态
  let videoIndex = 0;
  let clipIndex = 0;
  let loopCount = 0;
  const LOOP_TIMES = 5; // 每个片段需要循环的次数

  // 定义播放当前片段的函数
  function playCurrentClip() {
    const currentVideo = sentences[videoIndex];
    const currentClip = currentVideo[1][clipIndex];
    const url = currentVideo[0];
    const startTime = currentClip[0];
    const endTime = currentClip[1];

    playVideo(url, startTime, endTime, function() {
      loopCount++;
      if(loopCount < LOOP_TIMES) {
        // 还没到指定循环次数，继续播放当前片段
        playCurrentClip();
      } else {
        // 重置循环次数，切换到下一个片段
        loopCount = 0;
        clipIndex++;
        if(clipIndex >= currentVideo[1].length) {
          // 当前视频的片段都播放完了，切换到下一个视频
          clipIndex = 0;
          videoIndex++;
          if(videoIndex >= sentences.length) {
            // 所有视频都播放完了，重置到开头循环（可根据需求修改）
            videoIndex = 0;
          }
        }
        // 播放下一个片段
        playCurrentClip();
      }
    });
  }

  // 启动播放流程
  playCurrentClip();
}
</script>
</head>
<body>
<video id="myVideo" width="1000" height="800" controls autoplay loop>
  您的浏览器不支持video标签。
</video>

<br>
<a onclick="myLoop()"> 播放 </a>
</body>
</html>

关键说明 #

1. 改造playVideo：

   • 添加onComplete回调参数，用于在片段播放完成后通知外部逻辑
   • 每次播放前移除之前的timeupdate监听，避免重复绑定导致的多次触发问题
   • 片段播放完成后暂停视频，触发回调推进流程

2. myLoop核心逻辑：

   • 使用videoIndex、clipIndex、loopCount分别跟踪当前视频、当前片段和已循环次数
   • playCurrentClip函数负责播放当前状态对应的片段，并在回调中更新状态：
     • 若当前片段循环次数未达5次，继续播放当前片段
     • 若循环次数达标，切换到下一个片段；当前视频的片段全部播放完后，切换到下一个视频
     • 所有视频播放完成后，默认重置到开头继续循环（可根据需求调整为停止播放）

内容的提问来源于stack exchange，提问作者Tom