HTML原生video标签不支持循环指定时间段，需用JavaScript通过timeupdate事件监听currentTime，超结束点即跳回起点并调用play()；须加muted属性适配自动播放策略，并等待canplay状态以确保iOS Safari兼容。
video 标签本身不支持“循环某一段”
HTML 原生 的 loop 属性只能循环整个视频，无法指定起始/结束时间点。想实现“只循环 10s–25s 这段”，必须靠 JavaScript 控制播放行为。
用 currentTime + playbackRate 配合 timeupdate 事件手动截断
核心思路：监听当前播放时间，一旦超过目标结束点，立刻跳回起始点并保持播放。关键不是“暂停再播”，而是无缝跳转，避免黑屏或卡顿。
- 设置
video.currentTime = startSec后，需调用video.play()（尤其在自动播放被浏览器策略限制时） - 不要依赖
ended事件——它只在自然播完时触发，而你是在中间强制跳转 - 用
timeupdate比requestAnimationFrame更可靠：它由媒体引擎驱动，时间精度更高 - 检查时机要足够频繁（通常每 100ms 已足够），但避免在每次
timeupdate中都做浮点比较，可加简单防抖（如if (currentTime >= endSec - 0.05)）
const video = document.querySelector('video');
const startSec = 10;
const endSec = 25;
<p>video.addEventListener('timeupdate', () => {
if (video.currentTime >= endSec) {
video.currentTime = startSec;
// 确保继续播放（尤其 Safari 下可能暂停）
video.play().catch(() => {});
}
});</p>
注意 autoplay 和 muted 的兼容性陷阱
现代浏览器（Chrome、Safari、Firefox）普遍要求自动播放必须满足 muted + autoplay，否则 play() 会 Promise reject。即使你只是跳转后重播，也受此限制。
- 务必给
加上muted属性，否则video.play()在用户未交互前大概率失败 -
autoplay不是必需的——你可以等用户点击播放后再启用循环逻辑 - 如果必须静音，且内容有重要音效，需提前告知用户“本片段为静音循环”
移动端 iOS Safari 的特殊表现
iOS Safari 对 currentTime 设置响应较慢，尤其在刚加载或后台切回时，可能出现跳转延迟甚至失效。这不是 bug，是其媒体引擎的节电策略。
- 首次设置
currentTime前，确保视频已进入canplay或loadeddata状态 - 避免在
loadedmetadata阶段就设currentTime——此时缓冲不足，iOS 可能忽略 - 若循环起始点靠近视频开头，可先
video.play()一小段（比如 0.1s），再设currentTime，提高成功率
实际跑通的关键不在写几行代码，而在处理好浏览器策略、事件时机和移动端状态机之间的微妙配合。漏掉 muted 或没等 canplay 就设时间点，是线上最常复现的失败原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
