如何实现HTML5 video控件无需鼠标悬停始终显示

基础说明 #

最新版Chrome、Firefox浏览器的原生video控件默认仅在鼠标悬停时显示，仅设置controls="true"属性无法实现控件永久显示。
当前使用的基础代码如下：

<video width="320" height="240" controls="true">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

可用适配方案 #

方案1：CSS强制显示原生控件（优先使用，实现最简单） #

通过浏览器私有伪元素覆盖默认的隐藏逻辑，代码直接添加到样式文件中即可：

/* 适配Chrome、Edge等webkit内核浏览器 */
video::-webkit-media-controls {
  opacity: 1 !important;
  display: flex !important;
  visibility: visible !important;
}

/* 适配Firefox浏览器 */
video::-moz-media-controls {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 覆盖部分版本浏览器控制面板的自动隐藏逻辑 */
video::-webkit-media-controls-panel {
  opacity: 1 !important;
}

注意：如果video标签设置了controlsList属性，需要先移除其中的nodownload、nofullscreen等可能影响控件渲染的参数，避免冲突。

方案2：JS辅助触发显示（兼容特殊场景） #

如果CSS方案在部分版本浏览器中失效，可以通过JS模拟鼠标悬停事件，强制控件保持显示：

const video = document.querySelector('video');
// 每2秒触发一次mouseover事件，覆盖浏览器的自动隐藏逻辑
setInterval(() => {
  video.dispatchEvent(new MouseEvent('mouseover', {
    bubbles: true
  }));
}, 2000);
// 视频播放、暂停、进度变更时额外触发一次，避免操作后控件消失
['play', 'pause', 'timeupdate'].forEach(eventName => {
  video.addEventListener(eventName, () => {
    video.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
  })
})

方案3：自定义播放控件（完全可控） #

如果以上两种方案都无法满足需求，可以放弃原生controls属性，自行实现一套播放控件，通过JS调用video的API实现播放、暂停、进度调整、音量控制等功能，完全自定义显示逻辑，不会被浏览器默认规则限制。

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