HTML原生<video>标签可实现带章节跳转的课程播放页，核心是用data-start/end绑定章节时间、preload="metadata"优化加载、严格绑定用户手势触发play()。
怎么用 <video> 实现带章节跳转的课程播放页
直接上手：HTML 原生 <video> 标签就能撑起基础课程播放页，不需要框架或第三方 SDK。关键不是“能不能播”，而是“怎么让学员不迷路”——章节列表、进度同步、点击即播，这三件事得闭环。
核心思路是把视频时间点和章节元数据绑定起来，用 JavaScript 控制 currentTime 并更新 UI 状态：
- 每个章节对应一个
{ title: "变量声明", start: 120, end: 245 }对象 - 点击章节项时，调用
video.currentTime = chapter.start，再video.play() - 监听
timeupdate事件，实时比对当前时间落在哪个章节区间，高亮对应项
注意：浏览器对自动播放有策略限制（比如静音才允许自动播），所以 play() 调用可能被拒绝，建议加个 .catch(e => console.warn("auto-play blocked:", e)) 捕获提示。
章节列表怎么和视频时间精准对齐
常见错误是用固定时间戳硬编码，结果剪辑后全乱套。真正可维护的做法是：把章节时间写在 HTML 中，用 data-start 和 data-end 属性承载，而不是塞进 JS 变量里。
立即学习“前端免费学习笔记（深入）”；
<ol id="chapter-list"> <li data-start="0" data-end="118">课程导学</li> <li data-start="119" data-end="302">let 与 const 区别</li> <li data-start="303" data-end="520">作用域链详解</li> </ol>
这样后续视频微调时，只需改 HTML 属性，JS 逻辑完全不动。解析时用 parseInt(li.dataset.start) 转数字即可，别忘了处理 NaN。
另外，timeupdate 事件触发频率高但不精确（通常 200–500ms 一次），不要在里面做重操作；判断当前章节时，用 Math.floor(video.currentTime) 做整秒比对，避免浮点误差导致频繁切换高亮。
为什么 preload="metadata" 比 "auto" 更适合课程页
课程视频普遍单集 5–20 分钟，体积大。设成 preload="auto" 会让浏览器一加载页面就疯狂下载整个视频，用户还没点播放就浪费流量，还拖慢首屏渲染。
preload="metadata" 只请求视频头信息（时长、尺寸、封面帧），足够初始化控件和章节计算，等用户真要点了再加载主体——这是课程页的实际需求。
补充两点实操细节：
- 加上
poster属性，显示课程封面图，提升视觉引导性：<video poster="cover.jpg"> - 服务端要支持 HTTP Range 请求（Nginx 默认开启），否则
preload="metadata"会失败并退化为不预加载
移动端点击章节没反应？检查 playsinline 和用户手势
iOS Safari 和部分安卓 WebView 强制全屏播放，且要求 play() 必须由用户真实点击触发。如果章节列表是用 div + onclick 实现的，而没绑定到 <video> 上，iOS 会直接拒绝播放。
解决办法只有两个：
- 给
<video>加playsinline属性（iOS 必需）和webkit-playsinline（旧版兼容） - 确保播放调用发生在用户事件回调内，比如
chapterItem.addEventListener('click', () => { video.currentTime = x; video.play(); })，不能放在定时器或异步回调里
还有个隐藏坑：某些安卓机型对 video.play() 返回的 Promise 不 resolve，建议统一用 .then().catch() 处理，失败时 fallback 到提示用户手动点击播放按钮。
章节跳转这件事，难点不在代码多复杂，而在于时间精度、加载策略和平台行为差异的组合。把 data-start 放 HTML 里、用 preload="metadata"、严格绑定用户手势触发播放——这三条守住了，剩下就是样式和体验打磨了。
