如何修复‘带controls属性的video元素不能作为a元素后代’的HTML错误？

错误原因 #

HTML规范明确禁止带有controls属性的<video>元素作为<a>标签的子元素——两者都属于可交互元素，嵌套会导致交互逻辑冲突（比如视频播放控件的操作和a标签的跳转行为互相干扰），因此验证工具会抛出该错误。

正确实现方式 #

要实现「点击视频区域跳转链接，同时保留视频控件功能」的需求，需用JavaScript监听点击事件，区分点击的是视频内容区域还是控件区域，仅在点击内容区域时触发跳转。

代码示例 #

HTML结构

<video id="viking-video" width="512" height="288" controls>
  <source src="Videos/Vikings_Short.mp4" type="video/mp4">
</video>

JavaScript逻辑

const video = document.getElementById('viking-video');

video.addEventListener('click', (e) => {
  // 排除点击视频控件的情况（适配不同浏览器的控件结构）
  const isControl = e.target.closest('button') || 
                    e.target.closest('div[role="button"]') ||
                    e.target.classList.contains('media-control');
  
  if (!isControl) {
    // 点击视频内容区域时打开目标链接
    window.open('https://en.wikipedia.org/wiki/Vikings', '_blank');
  }
});

补充说明 #

• 该方案完全符合HTML规范，不会触发验证错误；
• 通过判断点击元素是否为控件，避免了点击播放/暂停按钮等控件时意外跳转；
• 若需要更直观的点击区域提示，也可以在video外嵌套一个div容器作为点击层，同时设置视频控件层级高于容器，确保控件正常可用。

内容的提问来源于stack exchange，提问作者mrdivi0910