如何取消HTML视频控制栏自动显隐，仅hover时显示？

问题背景 #

使用<video>标签实现的视频，在页面加载或从其他标签页切换回当前页面时，控制栏会自动显示数秒后消失。需要取消该默认行为，让控制栏仅在鼠标hover时出现，使视频表现得像GIF图片。原使用jQuery的方案在Chrome/Edge浏览器中无效。

解决方案 #

核心思路 #

• 初始状态移除controls属性，避免页面加载/切回时触发浏览器默认的控制栏显示逻辑
• 通过原生JavaScript监听鼠标的移入/移出事件，动态添加或移除controls属性
• 监听页面可见性变化，确保从其他标签页切回时控制栏保持隐藏状态

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        .video_preview::-webkit-media-controls-mute-button {
            display: none;            
        }
        .video_preview::-webkit-media-controls-volume-slider {
            display: none;            
        }
        .video_preview::-webkit-media-controls-current-time-display{
            display: none;            
        }
        .video_preview::-webkit-media-controls-time-remaining-display {
            display: none;            
        }
    </style>
</head>
<body>
    <div>
        <video id="myvideo" class="ha video_preview" width="20%" height="20%" muted autoplay loop controlslist="nodownload noremoteplayback noplaybackrate foobar" disablepictureinpicture src="http://www.computationalimaging.org/wp-content/uploads/2020/08/neuralholography_citl_holographic_display.mp4">Your browser does not support the video tag.</video>
    </div>

    <script>
        const video = document.getElementById('myvideo');
        
        // 页面加载完成后初始移除controls属性
        video.removeAttribute('controls');

        // 鼠标移入时显示控制栏
        video.addEventListener('mouseenter', () => {
            video.setAttribute('controls', 'controls');
        });

        // 鼠标移出时隐藏控制栏
        video.addEventListener('mouseleave', () => {
            video.removeAttribute('controls');
        });

        // 监听页面可见性变化，切回页面时确保控制栏隐藏
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
                video.removeAttribute('controls');
            }
        });
    </script>
</body>
</html>

关键修改说明 #

1. 移除静态controls属性：原HTML中video标签的controls属性会触发浏览器默认的控制栏自动显示逻辑，改为JS动态添加后可避免该问题
2. 替换为原生JS事件监听：放弃依赖jQuery，改用原生addEventListener实现鼠标事件监听，兼容性更稳定，解决Chrome/Edge中无效的问题
3. 添加页面可见性监听：通过visibilitychange事件捕获页面切回的场景，强制移除controls属性，确保控制栏不会自动弹出
4. 保留原有样式优化：继续隐藏控制栏中不需要的按钮和元素，保持视频的GIF式简洁表现

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