HTML中无法用a标签#t=跳转本地视频时间点，必须用JavaScript操作video.currentTime属性并调用play()；需监听点击事件、防止默认行为、处理自动播放限制及readyState状态。
HTML里怎么让链接跳转到视频指定时间点
能，但必须用 video 元素的 currentTime 属性配合 JavaScript，纯 HTML 的 a 标签加 #t= 只对 YouTube 等平台有效，对本地 video 标签完全无效。
常见错误是直接写：<a href="demo.mp4#t=60">跳到1分钟</a>——点击后视频会从头加载，时间戳被忽略。
- 浏览器只在极少数场景（如 YouTube、Vimeo）解析
#t=，这是平台 JS 自己实现的，不是 HTML 标准 - 本地文件或自托管视频，
#t=不触发任何行为，连 URL hash 都不会更新 - 必须监听点击事件，手动设置
video.currentTime = 60，再调用play()
给 video 标签加时间跳转按钮的最小可行写法
核心就三步：绑定元素、读取目标时间、执行播放控制。不需要框架，原生 JS 足够。
示例（假设视频 ID 是 myVideo）：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<video id="myVideo" controls>
<source src="demo.mp4" type="video/mp4">
</video>
<a href="#" onclick="jumpTo(30)">跳到30秒</a>
<a href="#" onclick="jumpTo(90)">跳到1分30秒</a>
<script>
function jumpTo(seconds) {
const v = document.getElementById('myVideo');
v.currentTime = seconds;
v.play().catch(e => console.warn('自动播放被阻止:', e));
}
</script>
-
v.play()可能被浏览器静音策略拒绝，尤其没用户交互过的页面，所以加了catch - 不要用
href="javascript:jumpTo(30)"，现代浏览器会警告或拦截 - 如果视频还没加载完，
currentTime设置可能无效，可监听loadedmetadata事件再允许跳转
用 data 属性批量管理时间点更可靠
硬编码 onclick 不利于维护，尤其时间点多、要动态生成时。用 data-time 统一管理更清晰。
结构示例：
<video id="mainVideo" controls>
<source src="talk.mp4" type="video/mp4">
</video>
<div class="timeline-links">
<a href="#" data-time="125">Q1 开始</a>
<a href="#" data-time="287">性能优化建议</a>
<a href="#" data-time="412">总结页</a>
</div>
<script>
document.querySelectorAll('.timeline-links a').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
const v = document.getElementById('mainVideo');
v.currentTime = parseFloat(el.dataset.time);
v.play().catch(() => v.load()); // load() 强制重载，避免卡在缓冲区
});
});
</script>
-
parseFloat()防止字符串导致计算异常（比如"125.5"） -
e.preventDefault()必须加，否则href="#"会让页面跳到顶部 -
v.load()是 fallback：当play()失败且视频处于stalled或emptied状态时，重载资源再试一次
移动端和 Safari 的兼容性坑
iOS Safari 和部分安卓 WebView 对自动播放限制更严，即使用户点过按钮，后续 play() 也可能失败，尤其视频未解码完成时。
- 不能依赖“点过一次就永远能播”，每次跳转后都得检查
v.readyState；readyState < 3表示还没准备好解码，此时设currentTime无效 - Safari 有时需要先
load()再play()，哪怕视频已加载；可加个简单轮询：if (v.readyState < 3) setTimeout(() => jumpTo(...), 100) - 不要用
timeupdate事件监听跳转是否生效——它只在播放中触发，跳转后暂停状态不会触发
时间跳转看着简单，实际卡在 readyState、autoplay 策略、buffer 状态这三个地方最多。别绕开它们去查“为什么跳不进去”，先 console.log(v.readyState, v.buffered.end(0))。
