HTML5 规范禁止将带 controls 属性的 元素作为 标签的后代，因其语义冲突且影响可访问性；正确做法是通过 CSS 定位实现“点击视频跳转链接”的视觉与交互效果。
html5 规范禁止将带 controls 属性的 `
该错误源于 HTML5 的语义化与可访问性约束：<a></a> 是交互式（interactive） 元素，而 <video controls></video> 本身已是可交互媒体控件（含播放、暂停、音量等原生控件）。将二者嵌套不仅违反规范（W3C validator 会报错），还可能导致屏幕阅读器混淆、键盘焦点异常、触控行为不可靠等问题。
✅ 正确解决方案是分离语义结构，叠加视觉层：保持 <video></video> 独立可操作，同时用 CSS 将透明 <a></a> 覆盖于视频之上，实现“点击即跳转”效果。推荐使用 display: grid 布局精准叠放：
<style>
.video-link {
display: grid;
position: relative; /* 可选，便于后续扩展 */
width: 512px;
height: 288px;
}
.video-link a,
.video-link video {
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
}
.video-link a {
z-index: 2;
background: none;
border: none;
}
/* 增强可访问性：移除默认下划线，确保点击区域明确 */
.video-link a:focus {
outline: 2px solid #007bff;
}
</style>
<div class="video-link">
<a href="https://www.php.cn/link/443a3c275fe761401ceb032f82069fe8" target="_blank" aria-label="跳转至维京人维基百科页面"></a>
<video width="512" height="288" controls preload="metadata">
<source src="Videos/Vikings_Short.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
</div>? 关键要点说明：
- ✅
<video></video>保留在 DOM 主流位置，确保控件可用、SEO 友好、无障碍支持（如controls自动适配键盘操作）； - ✅
<a></a>无内容、全尺寸覆盖，z-index: 2保证其捕获点击事件，aria-label提升屏幕阅读器体验； - ✅ 使用
preload="metadata"加速首帧加载，避免空白等待； - ⚠️ 避免使用
pointer-events: none在<video></video>上——这会禁用所有视频控件交互； - ⚠️ 不要改用
onclick+ JavaScript 跳转：绕过<a></a>语义会丢失右键新标签页、链接复制、SEO 权重等原生优势。
此方案完全符合 HTML5 规范、通过 W3C Validator 验证，同时兼顾用户体验、可访问性与维护性，是现代 Web 开发中的推荐实践。
立即学习“前端免费学习笔记（深入）”；
