HTML无内置视频剪辑时间轴，需用<input type="range">+<video>+JS模拟：精确控制currentTime、处理帧精度跳转、响应拖拽缩放，但不真正编辑文件。
HTML 本身不能做视频剪辑，也没有内置的“视频剪辑时间轴”控件；所谓“视频剪辑时间轴”，实际是用 <input type="range"> + <video> + JavaScript 模拟出来的交互界面，核心是精确控制 currentTime、处理帧精度跳转、响应拖拽和缩放，并非真正编辑媒体文件。
怎么用 <input type="range"> 做基础时间轴滑块
这是最轻量、兼容性最好的起点，但默认行为粗糙，必须手动接管：
-
<input type="range">的value是字符串，需转成数字再赋给video.currentTime -
max属性必须等同于video.duration，且要在loadedmetadata事件后设置，否则会卡在 0 - 拖拽时要监听
input事件（不是change），否则松手前无实时反馈 - 播放中需用
requestAnimationFrame同步更新滑块值，否则音画不同步
为什么直接绑定 video.ontimeupdate 更新滑块会卡顿
ontimeupdate 触发频率不可控（浏览器按帧或缓冲策略触发），高频更新 input.value 会引发 layout thrashing。正确做法是：
- 只在
input拖拽时暂停自动同步（video.pause()） - 拖拽结束（
change或mouseup）后才调一次video.currentTime = value - 播放状态下，用
requestAnimationFrame节流更新滑块，每帧最多更新一次 - 避免在
ontimeupdate里操作 DOM 或触发重排
如何实现“缩放时间轴”（类似 Premiere 的轨道缩放）
纯 HTML/CSS 无法缩放 <input type="range"> 的刻度密度，必须用自定义 canvas 或 div 模拟：
立即学习“前端免费学习笔记（深入）”；
- 用
<canvas>绘制带刻度的时间线，x 坐标映射到currentTime（公式：px = (currentTime / duration) * width） - 缩放靠调整 canvas 的
width和重绘刻度间隔（如 1s/5s/30s 切换），不改变 video 元数据 - 拖拽 canvas 上的游标时，用
getBoundingClientRect()算出 x 偏移，再反推currentTime - 注意：canvas 需监听
pointerdown/pointermove，并处理 touch 事件兼容性
关键坑：seeking 精度与关键帧依赖
浏览器 seek 不保证帧级精度，尤其 H.264 视频只能跳到 I 帧（GOP 起始点），导致 currentTime 设置后实际位置偏移：
- 设置
video.currentTime = 12.345后，读回video.currentTime可能是12.320或12.400 - 无法通过 JS 强制跳到任意毫秒点，除非服务端提供帧索引或 WebCodecs 解码
- 剪辑标记（in/out point）应存为相对时间戳，并在导出时由后端 FFmpeg 处理，前端只负责可视化对齐
- 若需高亮当前帧，用
video.requestVideoFrameCallback（Chrome 94+）比timeupdate更准，但非全平台支持
真正做剪辑的时间轴，从来不是靠一个 HTML 标签堆出来——它依赖 video 元数据解析、seek 精度妥协、canvas 刻度映射、以及后端真正的编码能力。前端能做的，只是把时间位置“说清楚”，把用户意图“传过去”。
