HTML列表内嵌入的video视频controls控件无法正常操作问题

常见原因1：CSS层级/事件属性限制 #

绝大多数此类问题都是父容器或其他叠加层遮挡了视频控件，或者父元素禁用了交互事件，可直接添加如下CSS规则修复：

.videoCV {
  /* 确保视频层级高于滑块其他装饰/遮罩元素 */
  position: relative;
  z-index: 99;
  /* 强制开启视频元素的交互权限，避免父容器设置pointer-events:none继承导致无法点击 */
  pointer-events: auto;
  /* 可选：触发硬件加速，避免transform类滑块效果导致控件渲染异常 */
  transform: translateZ(0);
}

你可以先通过浏览器开发者工具验证：按F12打开元素选择器，直接点击视频的播放/暂停按钮，看选中的元素是不是video控件，如果选中的是其他上层元素，直接给那个上层元素加pointer-events: none即可。

常见原因2：滑块JS事件拦截了点击 #

大部分滑块实现会给滑块项绑定点击、触摸事件来实现滑动切换逻辑，会拦截冒泡到视频控件的交互事件，添加如下JS代码即可修复：

const video = document.querySelector('.videoCV')
// 阻止点击事件冒泡到滑块父容器
video.addEventListener('click', e => e.stopPropagation())
// 适配移动端触摸事件
video.addEventListener('touchstart', e => e.stopPropagation())

如果你用的是第三方滑块插件，可以去插件文档找「允许内部元素点击事件透传」的相关配置，也可以解决这个问题。

排查验证项 #

• 确认video标签的controls属性没有被JS动态移除，可在开发者工具的元素面板直接查看video元素属性
• 确认没有自定义的伪元素或者其他透明节点盖在视频控件区域

内容的提问来源于stack exchange，提问作者Francisco Rodríguez Espinosa