Props 实现视频播放器进度联动的关键是父组件统一管理 currentTime、duration、isPlaying 等状态并提供 onSeek 等回调，子组件仅通过 props 渲染 UI 并触发回调，形成“数据驱动 UI + 操作触发更新”的双向契约。
用 Props 实现视频播放器的进度联动，关键在于父组件统一持有时间状态、子组件专注 UI 响应与操作反馈，双方通过 props 和回调函数形成闭环协作。不是简单传值，而是建立“数据驱动 UI + 操作触发更新”的双向契约。
父组件：集中管理时间与控制逻辑
父组件负责维护 currentTime（当前播放时间）、duration（总时长）、isPlaying（播放状态）等核心状态，并提供更新方法。这些值作为 props 下发，同时把 onSeek、onPlayToggle、onTimeUpdate 等回调函数也一并传给子组件。
- 用
useState管理 currentTime、duration、isPlaying - 用
useRef保存 video 元素引用，方便调用play()/pause() - 在
useEffect中监听videoRef.current的loadedmetadata事件，获取并设置 duration - 监听
timeupdate事件更新 currentTime，建议节流（如限制为每秒 10 次），避免频繁 setState 导致卡顿 - 实现
handleSeek(time)：接收目标时间，暂停播放 → 调用video.currentTime = time→ 可选恢复播放
子组件：接收 Props 并驱动 UI 与交互
子组件不维护任何播放状态，只根据父组件传来的 props 渲染和响应。进度条、播放按钮、时间显示等全部由 props 驱动，用户操作则通过回调通知父组件。
- 进度条使用
<input type="range" value="{currentTime}" max="{duration}" onchange="{(e)"> onSeek(parseFloat(e.target.value))} /> - 移动端注意监听
input事件而非change，保证拖动实时响应 - 播放按钮图标根据
isPlaying切换，点击时调用onPlayToggle - 当前时间显示（如 “2:35 / 5:48”）直接读取
currentTime和duration格式化输出
关键细节：同步、节流与兼容性
进度联动容易出问题的地方不在逻辑，而在边界处理和性能优化。
- 拖动时先
video.pause()，再seek，防止跳转过程中继续播放造成时间错乱 -
timeupdate频率高，建议用requestAnimationFrame或setTimeout节流，避免 UI 更新过载 - 移动端 range 输入框部分机型对
change事件支持不稳定，优先绑定input - 所有影响播放行为的操作（seek、play、pause）必须回到父组件统一调度，子组件只执行、不上报状态
为什么这样设计？
Props 在这里不只是“传数据”，而是定义父子协作接口：父组件提供能力（时间、开关、跳转），子组件提供反馈（拖动、点击、加载完成）。这种模式让状态可预测、调试更清晰，也为后续扩展倍速、字幕、播放历史等功能留出干净结构。
