自定义事件是解耦播放器模块、实现跨组件状态同步的关键，通过统一事件通道传递意图，避免直接操作DOM导致的状态冲突与不一致。
自定义事件是解耦播放器各模块、实现跨组件状态同步的关键手段。它不依赖 DOM 直接操作，而是通过统一的事件通道传递播放、暂停、跳转等意图，让 UI 控件、进度条、字幕、日志等模块各自响应，互不影响。
为什么用自定义事件而不是直接调用方法？
直接调用 video.play() 或修改 currentTime 容易造成逻辑散落、状态不一致。比如：用户点击进度条后，多个地方可能同时尝试设置 currentTime，引发冲突或跳变；又或者字幕组件自行监听 timeupdate 并更新，但没感知到外部手动跳转，导致不同步。自定义事件把“发生了什么”（如 'seek-to', 'toggle-play'）和“谁来响应”分离，更可控、可测试、易扩展。
核心事件类型与触发时机
推荐定义以下语义清晰的自定义事件：
- play-request：由按钮、快捷键、自动播放逻辑触发，表示“请求开始播放”，播放器组件收到后调用 play() 并确保 muted（如需静音自动播）
- pause-request：同理，表示“请求暂停”，避免重复调用 pause()
- seek-request：携带 { time: number } 数据，用于跳转。进度条拖拽、字幕点击、时间输入框提交都应派发此事件
- volume-change：携带 { volume: number, muted: boolean }，统一音量调控入口
- state-update（只读广播）：由播放器内部在 play/pause/timeupdate/ended 等原生事件后派发，含 { isPlaying, currentTime, duration, ended }，供其他组件订阅并更新 UI
如何在播放器组件中实现事件分发与响应
以原生 JS 为例，使用 EventTarget 实现轻量事件总线：
const playerBus = new EventTarget();
const video = document.getElementById('myVideo');
监听原生事件并转发为自定义事件：
video.addEventListener('play', () => {
playerBus.dispatchEvent(new CustomEvent('state-update', { detail: { isPlaying: true } }));
});
video.addEventListener('timeupdate', () => {
playerBus.dispatchEvent(new CustomEvent('state-update', {
detail: { currentTime: video.currentTime, duration: video.duration }
}));
});
响应外部请求：
playerBus.addEventListener('play-request', () => {
if (video.paused) video.play().catch(() => {});
});
playerBus.addEventListener('seek-request', e => {
video.currentTime = e.detail.time;
});
其他组件如何安全订阅与响应
各子组件只监听 state-update，不主动操作 video 元素：
- 播放按钮：监听 state-update，根据 isPlaying 切换图标和文案
- 进度条：监听 state-update 更新
input.value；同时绑定自己的 change 事件，再派发 seek-request，不直接设 currentTime - 字幕组件：监听 state-update，用 currentTime 查找当前句段，用 requestAnimationFrame 避免频繁重排
- 错误提示：监听 error 原生事件后，派发 error-report 事件，由全局错误处理器统一展示
