自定义HTML5视频控件无法在全屏模式显示的解决求助

你遇到的核心问题是全屏目标选错了：当前只让<video>元素单独进入全屏，但自定义控件<div class="controls">不在这个全屏元素的层级内，浏览器进入全屏模式后只会渲染全屏目标元素及其子元素，所以控件自然无法显示。以下是具体的解决步骤和修改后的代码：

解决方案思路 #

1. 将全屏请求的目标改为包含视频和控件的父容器.vd-wrapper，确保控件和视频同时进入全屏上下文
2. 补充全屏状态下的CSS样式，保证容器和视频自适应全屏窗口，控件层级正常
3. 完善全屏切换逻辑，支持退出全屏操作

修改后的CSS代码 #

/* 彻底隐藏浏览器默认视频控件 */
video::-webkit-media-controls {
    display: none !important;
}

/* 自定义控件基础样式，确保层级足够 */
.controls {
    position: relative;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    color: #fff;
}

/* 全屏状态下的容器样式（标准语法） */
.vd-wrapper:fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.vd-wrapper:fullscreen .video {
    flex: 1;
}

.vd-wrapper:fullscreen video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持视频比例，避免拉伸变形 */
}

/* 兼容webkit内核浏览器的全屏伪类 */
.vd-wrapper:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.vd-wrapper:-webkit-full-screen .video {
    flex: 1;
}

.vd-wrapper:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

修改后的JS代码 #

const video = document.querySelector('video');
const fullScreenBtn = document.getElementById("full-screen-icon");
const vdWrapper = document.querySelector('.vd-wrapper');

fullScreenBtn.addEventListener("click", toggleFullScreen);

function toggleFullScreen() {
    // 判断当前是否处于全屏状态
    const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement;
    
    if (!isFullScreen) {
        // 进入全屏：请求容器而非单独视频进入全屏
        vdWrapper.requestFullscreen?.() || vdWrapper.webkitRequestFullscreen?.();
    } else {
        // 退出全屏
        document.exitFullscreen?.() || document.webkitExitFullscreen?.();
    }
}

关键说明 #

• 全屏目标切换：把video.requestFullscreen()改成容器的全屏请求，让控件和视频处于同一个全屏上下文，避免被浏览器隐藏
• 全屏样式适配：通过:fullscreen（及webkit前缀伪类）设置全屏状态下的容器布局，保证视频占满可用空间且比例正常
• 兼容性处理：添加webkit内核的API和伪类兼容，覆盖Chrome、Safari等主流浏览器

如果需要让控件悬浮在视频上方，可将.controls的position改为absolute，同时给.vd-wrapper添加position: relative，再通过bottom、left等属性定位控件位置。

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