音视频播放器必须用figure包裹video或audio，且配figcaption提供具体上下文；main包裹播放主体，各功能区用section划分；video需controls、muted autoplay及track字幕，响应式依赖video自身css。
音视频播放器周边的HTML结构，必须用figure包裹video或audio，否则语义断裂、无障碍失效、SEO弱化——这不是可选项，是基础要求。
为什么不能只用div包video
很多项目把video塞进一个div class="player-wrapper"里，看似能控制样式，实则埋下三类问题：
- 屏幕阅读器无法识别“这是一个独立媒体内容”，会跳过或误读为普通容器
- 搜索引擎不认为该区块有独立语义，标题、描述、字幕等上下文信息难以被提取
- 当页面含多个视频时，缺乏
figure隔离，JS 选择器易误匹配（比如document.querySelector('video')返回第一个，但你本意是操作当前章节的）
正确做法是：每个独立可理解的音视频单元，都必须用figure包裹，且仅包裹它自己及直接相关元素（如figcaption）。
figcaption不是可选装饰，而是语义必需项
figcaption的作用不是“加个标题好看”，而是为媒体提供不可省略的上下文说明。缺失它，等于让听障用户、爬虫、语音助手失去理解依据。
- 必须紧邻
video或audio，且在同一个figure内（前后顺序不限，但不能跨标签） - 内容应具体，避免“视频”“音频”这类空泛词；推荐写成“2026年夏季发布会现场实录”或“第3章：CSS Grid 布局详解（含代码演示）”
- 若已有
h1～h6作为主标题，figcaption可补充技术细节、时长、来源等次要但关键信息
错误示例：<figure><video></video></figure> —— 没有figcaption，语义不完整。
main和section怎么配合figure组织播放页
单个视频播放页 ≠ 一个video标签。它是一组有层级的信息模块，需靠结构标签锚定角色：
-
main必须包裹整个播放主体区域，且内部首个子元素建议是h1（视频标题）或figure（若标题已含在figcaption中，则h1仍需存在并保持语义一致性） - 视频简介、弹幕区、评论区、相关推荐等，应各自用
section划分，而非堆在同一个div里；每个section可带aria-labelledby指向对应标题 - 避免嵌套过深：
main > section > figure > video是合理路径；main > div > section > div > figure中间多余的div必须删除
Chrome 和 Safari 的开发者工具里，用“Accessibility”面板检查，若video节点未出现在“Landmark”或“Figure”区域下，基本说明结构出错。
响应式与可访问性必须从HTML结构出发
很多人以为“加个max-width: 100%就搞定响应式”，但若结构没立住，样式再细也救不了语义漏洞：
-
video必须带controls属性，否则键盘用户无法操作；静音自动播放（muted autoplay）是绕过 Chrome 限制的唯一合规方式 - 字幕用
track标签引入，且kind="subtitles"或kind="captions"必须明确，不能只靠文件名判断 - 降级文本（fallback text）要写在
video开始标签和结束标签之间，而不是外面的div里；否则无JS/无CSS环境下用户看不到提示
最常被忽略的一点：figure本身不自带语义化宽度控制，它的响应式行为完全依赖内部video的CSS设置——所以video { max-width: 100%; height: auto; }这行样式，不是锦上添花，是结构生效的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
