通过将视频及其自定义控件包裹在同一个容器元素中，并对该容器调用全屏 api，可确保控件随视频一同进入全屏，避免原生浏览器全屏时隐藏控件的问题。
通过将视频及其自定义控件包裹在同一个容器元素中，并对该容器调用全屏 api，可确保控件随视频一同进入全屏，避免原生浏览器全屏时隐藏控件的问题。
在 Web 开发中，为
根本原因在于：浏览器的全屏 API 作用于被请求的 DOM 元素及其子树。若仅对
✅ 正确做法：全屏整个控制容器
1. HTML 结构改造 —— 封装容器
为视频和控件添加统一父容器（如 id="vid_container"），确保所有交互元素处于同一 DOM 子树中：
<div id="vid_container">
<video id="video" class="video w-100" controls="false"><source src="https://test.loro.ec/www/t/test.loro.ec/images/articles_blocks/608.mp4" type="video/mp4"></source></video><div class="controls position-relative" style="top: -50px; margin-left: 8px;">
<div class="row">
<div class="col-1">
<button class="controls__button toggleButton btn" id="toggleButton" title="Toggle Play" onclick="togglePlay()">►</button>
</div>
<div class="progress col-5 p-0" id="progressId">
<div class="progress__filled" style="background: rebeccapurple;"></div>
</div>
<div class="col-4">
<i class="bi bi-volume-up"></i>
<input class="form-range" style="width: 80%;" type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
</div>
<div class="col-1">
<button class="btn" onclick="toggleFullScreen()"><i class="bi bi-arrows-fullscreen"></i></button>
</div>
</div>
</div>
</div>
⚠️ 注意：
2. JavaScript 逻辑更新 —— 全屏目标切换
修改 JS，获取容器元素，并在其上调用全屏方法（而非 video 元素）：
// 获取容器（关键变更）
const container_vid = document.getElementById("vid_container");
const video = document.querySelector(".video");
const toggleButton = document.querySelector(".toggleButton");
const toggleButtonId = document.getElementById("toggleButton");
const progress = document.querySelector(".progress");
const progressBar = document.querySelector(".progress__filled");
const progressId = document.getElementById("progressId");
const volumeBar = document.getElementById("volume-bar");
// ...（其余事件监听器保持不变，如 togglePlay、handleProgress、scrub 等）
function toggleFullScreen() {
if (container_vid.requestFullscreen) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
container_vid.requestFullscreen();
}
} else if (container_vid.msRequestFullscreen) {
if (document.msFullscreenElement) {
document.msExitFullscreen();
} else {
container_vid.msRequestFullscreen();
}
} else if (container_vid.mozRequestFullScreen) {
if (document.mozFullScreenElement) {
document.mozCancelFullScreen();
} else {
container_vid.mozRequestFullScreen();
}
} else if (container_vid.webkitRequestFullscreen) {
if (document.webkitFullscreenElement) {
document.webkitExitFullscreen();
} else {
container_vid.webkitRequestFullscreen();
}
} else {
alert("Fullscreen is not supported in this browser.");
}
}
? 提示：现代标准已统一为 document.fullscreenElement 和 document.exitFullscreen()，旧前缀（如 cancelFullScreen）已废弃，建议优先使用标准 API。
3. 可选增强：全屏状态样式适配
进入全屏后，你可能需要调整控件位置或尺寸以适配大屏。可通过 CSS 监听 :fullscreen 伪类：
#vid_container:fullscreen .controls {
top: 16px; /* 调整全屏时控件距顶部距离 */
margin-left: 16px;
}
#vid_container:fullscreen .video {
height: 100vh;
object-fit: contain;
}
? 总结
- ❌ 错误方式：对
- ✅ 正确方式：用 包裹
