seekable属性只读且仅反映可跳转时间范围，无法直接限制跳转；需结合seeking事件监听、timeupdate检测及主动校验currenttime是否在seekable区间内来实现仅允许观看已缓冲部分。
Video标签的seekable属性本身是只读的，**无法直接用于限制用户跳转**，它只是反映浏览器当前可跳转的时间范围（即已缓冲且解码完成的片段）。真正实现“仅允许观看已缓冲部分”的效果，需要结合seekable检测 + timeupdate与seeking事件监听 + 主动干预跳转行为。
理解seekable属性返回的TimeRanges对象
video.seekable返回一个TimeRanges对象，类似{ length: 1, start(0): 0, end(0): 12.4 }。它表示当前可安全跳转的时间区间（单位：秒）。注意：
– 多个缓冲段会形成多个区间（如网络抖动导致不连续缓冲）；
– 移动端或部分浏览器可能只暴露一个连续区间（即使实际有断点）；
– 它不保证帧精确可用，仅表示媒体引擎认为该时间点可seek。
监听seeking事件并校验目标时间
当用户拖动进度条或调用currentTime赋值时，会触发seeking事件。此时可检查目标时间是否落在seekable范围内：
- 在
seeking事件处理器中，获取video.currentTime（即用户试图跳转到的时间）； - 遍历
video.seekable的每个区间：for (let i = 0; i ； - 若
currentTime不在任一区间内（即currentTime seekable.end(i)），则立即重置为最近的合法位置（如区间末尾）； - 使用
video.currentTime = Math.min(...validEnds)或固定回起始缓冲点，避免卡死。
主动降级体验：禁用原生控件+自定义进度条
原生控件无法拦截拖拽，必须禁用并手写可控UI：
- 设置
<video controls="false"></video>，隐藏默认进度条； - 用
<input type="range">模拟进度条，并绑定input事件； - 每次拖动时，先校验目标时间是否
（假设单区间）； - 若超出，阻止赋值、视觉上锁定滑块位置、提示“暂未加载”；
- 同时监听
progress事件动态更新可拖拽最大值（max属性）。
补充策略：预加载与缓冲策略协同
仅靠拦截不够，需提升缓冲连续性：
- 设置
preload="auto"（但注意移动端可能忽略）； - 监听
progress事件，在缓冲增长时主动更新自定义进度条的可拖拽上限； - 对关键内容，可预先请求关键帧索引（需服务端支持MP4 moov前置或DASH/CMAF分片）；
- 避免设置
buffered替代seekable——buffered表示已下载但未必可seek（如未解码），seekable才是权威依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
