用 <video> 标签替代 <iframe> 是现代播放页结构的合理起点，需以语义化标签（如 <main>、<h1>、<article>）明确内容层级，保障可访问性、SEO 和维护性。
用 <video> 标签替代 <iframe> 是播放页结构的起点
多数视频网站早期用 <iframe> 嵌入第三方播放器，但 HTML5 的 <video> 提供了原生语义、可访问性支持和更可控的 DOM 操作能力。直接使用 <video> 是现代播放页结构的合理起点，前提是播放器逻辑能基于原生事件（如 play、timeupdate、ended）重建。
常见错误是只把 <video> 当成“容器”，忽略其与周边结构的语义关联。比如将弹幕层、控制栏、标题区全部塞进一个无意义的 <div>，导致屏幕阅读器无法识别主内容区域。
-
<video>必须包裹在<main>内，且设置aria-label或配合<h1>明确当前视频主题 - 避免在
<video>外层再套多层<div>—— 如需样式隔离，用display: contents或 CSS containment - 若使用自研播放器（如基于 MSE 的），仍应保留
<video>作为唯一媒体元素，所有解码/渲染最终输出到它
标题、简介、操作区必须用语义化标签明确角色
播放页不是纯视觉布局，而是信息分层：用户要快速识别“这是什么视频”“谁发布的”“我能做什么”。HTML5 结构标签在这里不是装饰，而是支撑 SEO、无障碍和 JS 选择器稳定性的基础。
典型错误是把视频标题写成 <div class="title">，结果搜索引擎无法提取主标题，语音助手读不出层级。
立即学习“前端免费学习笔记（深入）”；
- 视频标题必须用
<h1>，且紧邻<main>内的<video>（不跨<section>） - 作者信息用
<aside>包裹，内含<h2>（如“UP 主”）和<address>（用于标识创作者联系信息语义） - 点赞、投币、收藏等操作按钮组建议放在
<footer>内（注意：是<main>的<footer>，不是整个页面的<footer>），体现“对当前视频内容的操作归宿”
<article> 和 <section> 别混用：评论区必须是 <article>，相关推荐是 <section>
评论不是“页面一部分”，而是独立、可引用、可订阅的内容单元。每个评论本身具备完整语义：作者、时间、内容、互动数——这正是 <article> 的设计意图。而“猜你喜欢”“合集列表”这类辅助内容，没有独立发布上下文，属于页面组织片段，该用 <section>。
容易踩的坑是把整块评论容器设为 <section>，里面再用一堆 <div>，导致 RSS 抓取或浏览器“阅读模式”无法识别单条评论。
- 每条评论项用
<article>，顶部用<header>包<h3>（昵称）+<time> - 评论容器整体用
<section aria-labelledby="comments-heading">，并配<h2 id="comments-heading">评论</h2> - 相关推荐、播放列表等非核心内容区块统一用
<section>，不嵌套<article>，除非其中每一项都满足“可独立分发”条件（如单集剧集页）
响应式断点与 <picture> 配合封面图时，别让 <video> 的 poster 属性失效
播放页封面图常需适配移动端竖屏、桌面端横屏甚至 TV 端大尺寸。很多人用 <picture> + <source media> 控制封面图，却忘了 <video> 的 poster 属性不支持媒体查询，始终加载同一张图，导致小屏下高清 poster 浪费带宽，大屏下模糊。
解决方案不是放弃 poster，而是让它成为 fallback，并用 CSS 覆盖：
<video poster="/cover-small.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<style>
@media (min-width: 768px) {
video::before {
content: "";
background-image: url(/cover-large.jpg);
/* 用伪元素叠加高分辨率封面 */
}
}
</style>-
poster仅保留最小必要尺寸（如 320×180），确保首屏快速加载 - 真正响应式封面由 CSS
background-image+@media控制，叠加在<video>上（注意 z-index 和 pointer-events） - 若需支持 WebP/AVIF，
<picture>不适用 poster 场景，只能靠 JS 动态设置video.poster，但需监听loadstart防止闪动
实际项目中最容易被忽略的是 <main> 的边界划定——它必须严格包裹从视频播放器到评论区的全部“当前视频专属内容”，任何全局导航、侧边栏、底部版权栏都不能被包进去。否则，键盘用户按 Ctrl+Shift+I（跳转到主内容）会落到错误位置，自动化测试也会误判页面主干。
