用Props实现视频播放器进度控制的核心是父组件集中管理currentTime、duration、isPlaying等状态并提供onSeek等回调，子组件仅通过Props驱动UI和交互，双向协作确保状态同步与可扩展性。
用 Props 实现视频播放器的进度控制，核心是父组件管理播放状态（如 currentTime、duration、isPlaying），子组件（视频容器）通过 Props 接收并响应这些值，同时将用户操作（如拖动进度条）通过回调函数通知父组件更新状态。
父组件：集中管理时间与控制逻辑
父组件持有视频的当前时间、总时长、播放/暂停状态等数据，并提供更新方法。它把当前时间、是否播放、总时长作为 Props 传给子组件，同时把 onTimeUpdate、onPlayToggle、onSeek 这类回调函数也作为 Props 传下去。
- 使用 useState 管理
currentTime、duration、isPlaying - 用 useRef 保存 video 元素引用，便于调用
play()/pause() - 监听
timeupdate事件自动更新currentTime（可节流优化） - 实现
handleSeek(time)方法，用于接收子组件传来的拖动目标时间
子组件：接收 Props 并驱动 UI 与交互
子组件不维护播放状态，只负责渲染视频元素、进度条、播放按钮等 UI，并根据父组件传来的 Props 控制行为。例如：currentTime 决定进度条填充宽度，isPlaying 控制按钮图标，onSeek 绑定到进度条拖动事件。
- 用
<video>的 ref 接收父组件传入的 video 引用（或直接在子组件内 ref，但需同步状态） - 进度条（
<input type="range">）的value设为currentTime，max设为duration - 绑定
onChange到onSeek回调，把e.target.value转为数字后传给父组件 - 播放按钮点击触发
onPlayToggle，由父组件决定是 play 还是 pause
关键细节：同步与防抖
视频时间频繁变化（每秒多次），若每次 timeupdate 都触发 setState，可能引发性能问题或 UI 卡顿。建议对时间更新做轻量节流。
- 用 useEffect 监听
videoRef.current，在其加载完成（loadedmetadata）后获取duration - 用 requestAnimationFrame 或 setTimeout 节流
timeupdate更新频率（如限制为 10fps） - 拖动进度条时，先暂停播放（调用
video.pause()），再 seek，完成后可按需恢复播放 - 注意移动端
input[type="range"]的兼容性，部分机型需监听input而非change
Props 传递不是单向“展示”，而是双向契约
Props 在这里是父子协作的接口：父组件提供数据和能力（时间、开关、跳转），子组件提供反馈和触发（拖动、点击、加载完成）。这种模式清晰分离关注点，避免子组件内部维护冗余状态，也方便后续接入播放历史、倍速、字幕等扩展功能。
不复杂但容易忽略的是——所有影响视频行为的操作（seek、play、pause）最终都应回到父组件统一调度，子组件只做“执行者”和“上报者”。
