video currentTime赋值后不跳转，常见原因是video.readyState＜2（未加载元数据）或缓冲不足，此时设置被忽略且不报错；需等待loadeddata事件或readyState≥4再赋值，并确保play()被用户手势触发。
video currentTime 赋值后不跳转，常见原因是什么？
浏览器不会自动响应 video.currentTime 的赋值，除非视频已进入可播放状态。最常踩的坑是：脚本执行时 video.readyState 还是 0（HAVE_NOTHING）或 1（HAVE_METADATA），此时设置 currentTime 会被忽略，且不报错。
- 必须等
video.readyState >= 2（HAVE_CURRENT_DATA）或更优的readyState === 4（HAVE_ENOUGH_DATA）再设时间点 - 若用
autoplay，需配合muted，否则现代浏览器会静默阻止播放，导致timeupdate不触发、seeking状态不可靠 - 直接在
loadedmetadata事件里设currentTime通常不够——该事件只保证元数据就绪，不一定能立即 seek
推荐写法：
const video = document.querySelector('video');
video.addEventListener('loadeddata', () => {
video.currentTime = 65; // 比 loadedmetadata 更稳妥
});
字幕行怎么绑定点击跳转到对应时间点？
HTML 中没有原生「字幕标签」，所谓“字幕”实际是自定义 DOM 元素（如
- 给字幕元素加
data-start="65"和data-end="68"属性，便于后续扩展（比如高亮区间） - 点击时禁止默认行为（避免页面跳转或选中干扰），调用
video.currentTime = parseFloat(el.dataset.start) - 必须紧接着调用
video.play()，否则部分浏览器（尤其 Safari）在非用户手势上下文中不会恢复播放
示例结构：
<div class="subtitle" data-start="65">第一句字幕</div> <div class="subtitle" data-start="72">第二句字幕</div>
document.querySelectorAll('.subtitle').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
video.currentTime = parseFloat(el.dataset.start);
video.play().catch(() => {});
});
});
为什么点击字幕后视频从头开始播？
根本原因是没处理浏览器的自动播放策略和 readyState 状态：
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 用户未与页面交互过（如点击、滚动），Chrome/Safari 会拒绝
play()调用，返回 Promise rejection，但不中断脚本 -
currentTime设置成功了，但play()失败 → 视频保持暂停，下次播放仍从 0 开始 - 更隐蔽的问题：若视频之前处于
paused状态，而你只设currentTime没调play()，它就卡在新位置不动
关键检查点：
- 点击前确保
video.paused === true，否则先video.pause()再设时间再play() - 用
.catch(e => console.debug('play failed:', e))捕获拒绝原因，常见提示是"The user gesture requirement is not met." - 若必须无交互启动，服务端提供静音 + autoplay 的视频，或引导用户首次点击任意区域解除限制
如何让字幕跳转更精准、不卡顿？
timeupdate 事件本身有延迟（200–250ms），仅靠它做校准不可靠；真正影响体验的是 seek 的起始时机和缓冲状态：
- 避免在
seeking为 true 时重复设置currentTime，否则可能触发多次 seek，造成卡顿或跳帧 - 可监听
seeked事件确认定位完成，再更新 UI（如高亮当前字幕行） - 若视频已完全加载（
video.buffered.length > 0 && video.buffered.end(0) === video.duration），seek 几乎瞬时完成 - 对频繁跳转场景，可加防抖：500ms 内重复点击同一字幕，忽略后续
容易被忽略的一点：移动端 touchstart 比 click 更快触发，但需注意 preventDefault() 会禁用默认滚动，慎用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
