课程预览、产品演示、教程片段——需要封面、控件、进度，并要面对加载、失败、无源等状态的视频位。
界面与交互 · 内容与数据展示
视频Video
页面中的视频位要面对封面待播、加载中、播放、暂停、失败和无源等状态：用封面、spinner、进度条、AA 红错误占位和空态让视频位本身说清楚，再加可操作的控件让用户始终能控制。
课程详情页的预览视频：封面、加载、播放、出错、空都长在视频位上
点大播放键开始，或切「视频源」（正常 / 错误 / 无源），看同一个视频位长出不同物件。出错后点「重试加载」恢复；播放中可暂停、静音、开关字幕、拖进度。
第 0 步：这是课程详情页的「课程预览视频」位。点中间的大播放键开始；用「视频源」切换正常 / 错误 / 无源， 看同一个视频位长出不同物件——封面、加载、播放（进度+时间）、出错（重试）、空。所有变化长在视频位上。
产品演示 · 入门到上手02:14
视频源（决定视频位长出什么）
原因：课程预览视频停在封面态：自定义封面、标题「产品演示 · 入门到上手」和 02:14 时长都在，大播放键居中。默认不自动播放、不出声。下一步：点视频位中间的大播放键（或下方「播放」）开始；想看失败路径，先把「视频源」切到「错误源」。对照：封面是视频位的默认物件，告诉用户「这是什么、要播多久」，而不是黑屏或自动出声。
面板教会的知识点
把刚才在视频位上看到的现象命名为六条规则。
- 默认封面待播：不开自动播放、不出声；封面、标题和时长先告诉用户「这是什么、要播多久」。
- 加载中用 spinner 加文字：缓冲时视频位长出 spinner 和「缓冲中」，控制条禁用，不露黑屏也不让用户反复点。
- 播放态有进度和时间：播放中底部出现进度条，控制条同步「当前时间 / 总时长」并随播放推进，可暂停恢复。
- 失败给 AA 红占位加重试：加载失败时长出红色错误占位、写明「视频加载失败」并给主操作「重试加载」，不静默卡住。
- 无源给空态：没有视频时用虚线空态说「暂无视频源」，保留视频位尺寸，避免页面塌陷。
- 控件始终可操作：播放/暂停、静音、字幕、进度滑块用原生控件，键盘可达、焦点可见、状态有文字。
什么时候用，怎么用
从一个具体信号判断，再走最短路径。
纯装饰背景（用 CSS 背景视频或 GIF 并静音）；单张图（用 image）；多段视频轮播（用 carousel）；实时直播（用专门直播组件）。
- 定比例：用 aspect-ratio 16/9 给视频位留位置，加载前、加载中、加载后尺寸一致，不跳布局。
- 定封面：用 poster 或自定义封面加标题、时长；默认不自动播放有声音的视频。
- 给控件：播放/暂停、静音、字幕、进度都用原生可操作控件，键盘可达、aria-label 清楚、状态有文字。
- 给降级：加载中给 spinner 加文字；失败给 AA 红占位加重试；无源给空态——都不露黑屏或破图。
- 给字幕与无障碍：字幕可独立开关；播放按钮、进度条有可访问名称与当前值；减动效下 spinner 静态化。
同一课程预览视频：正例与反例
目标都是「让用户看课程预览」。差别只在视频位有没有长出封面、进度、失败重试和控件。
课程预览视频默认显示封面、标题和 02:14 时长，大播放键居中；点播放后底部出现进度条和时间， 可暂停、静音、开关字幕、拖进度；加载失败显示 AA 红占位加「重试加载」。
差异：每个状态都长在视频位上，控件齐全，失败可恢复。视频位是黑屏加一个无限转圈的 spinner，看不出是在加载还是坏了；没有封面、标题、时长， 不能暂停、不能拖进度；加载失败直接卡住，没有重试入口，用户只能刷新整个页面。
差异：删掉封面、进度、控件和重试，视频位从可控变成黑盒。快速自测
课程预览视频加载失败了，用户最该看到什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。