用途
Video Player 模式用于实现带控件的视频播放。它帮助团队建立一种可靠的方式，支持视频播放，并具备可理解的控件、可应对的缓冲状态以及无障碍的替代访问路径。该模式在团队需要课程与教程播放时最为有用。
与相邻模式相比，该模式应在不隐藏人们持续使用所需的状态、规则或恢复路径的前提下减少摩擦。
适用场景
- 课程与教程播放
- 营销与讲解视频
- 嵌入式产品演示
应避免的场景
- 如果实际上不需要完整的媒体处理，请使用更简单的图片、链接或文件输入。
- 当浏览器原生行为已足够满足任务时，避免使用丰富的自定义控件。
- 不要假设网络密集型媒体适合所有受众或场景。
实现流程
- 在复制示例之前，确认该模式与问题和约束相匹配。
- 从 references/pattern.md 中的结构与示例入手，然后选择最小可行的变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互防护措施。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍防护措施
键盘交互
- 验证视频播放器可以仅使用键盘完成操作。
- 当模式打开、更新或显示额外 UI 时，保持焦点顺序合乎逻辑。
- 保持在高倍缩放时仍然可读的可见焦点状态。
屏幕阅读器支持
- 优先使用语义元素，仅在语义本身不足时才添加 ARIA。
- 在正确的位置以正确的礼貌程度播报状态变化，例如错误、加载或完成。
- 在有用时，通过 aria-describedby 或结构化标题连接标签、提示和状态文本。
视觉无障碍
- 不要仅依靠颜色来传达严重程度、完成或选中状态。
常见错误
仅将媒体视为装饰
问题：当设计假设媒体只是视觉点缀时，重要的上传和播放流程会出问题。
如何修复：将状态、元数据和控件设计为该模式的一等组成部分，而不是事后添加的覆盖层。
跳过降级行为
问题：不同设备支持不同的编解码器、采集流程和带宽范围。
如何修复：为不支持的 API、低数据条件和加载失败规划优雅降级。
忘记无障碍产物
问题：当缺少字幕、转录文本、替代文本或可见状态时，媒体模式会迅速变得具有排他性。
如何修复：将替代访问路径视为核心体验的一部分，而不是发布后的打磨。
相关模式
- https://uxpatterns.dev/patterns/media/image-gallery
- https://uxpatterns.dev/patterns/user-feedback/loading-indicator
- https://uxpatterns.dev/patterns/user-feedback/progress-indicator
有关完整实现细节、示例和测试说明，请参阅 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/media/video-player