AB循环需通过JavaScript控制时间轴、拦截ended事件并提供交互反馈，而非依赖loop属性；核心是监听timeupdate实时跳转currentTime，配合防抖与用户标记A/B点实现精准重复播放。
用 HTML5 `
一、基础结构：准备可交互的 video 元素
先确保视频加载友好、兼容性强，并预留 JS 控制入口：
- 移除 `autoplay` 或谨慎使用（建议配合用户首次点击触发），避免被浏览器拦截
- 保留 `controls` 供手动操作，或完全隐藏后自建 UI（更利于学习工具定制）
- 添加 `preload="metadata"` 加速首帧加载，提升选段响应速度
- 提供 MP4 + WebM 双格式 `
`，兼顾解码性能与兼容性
示例代码：
<video id="learnerVideo" preload="metadata" width="100%"><source src="lesson.webm" type="video/webm">
<source src="lesson.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
二、实现 AB 选段循环：绑定起止点 + 自动重播逻辑
核心是监听用户设置的 A 点（起点）、B 点（终点），并在播放到达 B 点时自动跳回 A 点继续——不是靠 `loop`，而是靠 `ended` 或 `timeupdate` 事件干预。
立即学习“前端免费学习笔记（深入）”；
- 用两个按钮或输入框让用户标记 A/B 时间（单位：秒），存为变量
aTime和bTime - 监听
timeupdate事件，实时检查video.currentTime是否 ≥bTime - 一旦超限，立即执行：
video.currentTime = aTime; video.play(); - 为防反复触发，可加防抖（如设置标志位
isJumping = true，跳转后 100ms 再置 false）
简易 JS 片段：
const video = document.getElementById('learnerVideo');let aTime = 12.5, bTime = 28.3;
video.addEventListener('timeupdate', () => {
if (video.currentTime >= bTime && !isJumping) {
isJumping = true;
video.currentTime = aTime;
setTimeout(() => isJumping = false, 100);
}
});
三、增强学习体验：添加可视化与快捷操作
纯功能不够，学习工具需要明确反馈和低操作成本：
- 在视频上方叠加半透明时间条，用两个可拖拽的滑块标出 A/B 位置（可用
<input type="range">绑定） - 点击「设为 A」按钮时，取当前播放时间作为 A 点；同理「设为 B」取当前时间
- 提供「单次播放」「AB 循环」「整段循环」三种模式切换，用 radio 或 toggle 按钮控制逻辑分支
- 循环中高亮当前播放区间（如用 CSS 渐变覆盖进度条某一段），让用户一眼看清范围
四、补充细节：移动端适配与容错处理
尤其在 iOS 上，需额外注意：
- 务必添加
playsinline属性，防止视频跳出页面全屏 - 若开启静音循环（如背景讲解），加上
muted可绕过自动播放限制；但学习场景通常需声音，建议首次点击后调用video.muted = false再play() - 监听
canplay而非loadeddata，确保元数据就绪再允许设点，避免currentTime设置失败 - 对无效时间（如 A ≥ B、负值、超出时长）做校验并提示，而不是静默忽略
