video原生全屏时自定义按钮失效的根本原因是浏览器将video提升为顶层渲染层，导致按钮脱离dom流而被裁剪或隐藏；解决方法是监听fullscreenchange事件，动态将按钮appendchild到document.fullscreenelement内，并用position:absolute、opacity和rgba背景实现可见性与半透明效果。
video 元素原生全屏时会脱离正常 DOM 渲染流，所有自定义控制按钮（如 play、volume）默认会被隐藏或失效——这不是样式问题，而是浏览器全屏 API 的行为限制。
全屏状态下自定义按钮不显示的根本原因
调用 video.requestFullscreen() 后，浏览器将 video 提升为顶层渲染层（类似 OS 窗口），此时：
- 所有父容器的 CSS（包括 z-index、opacity、transform）对按钮无效
- 按钮若未显式挂载到 document.fullscreenElement 内部，就会被裁剪或完全不可见
- ::-webkit-media-controls 等伪元素无法覆盖原生控件区域
让按钮在全屏时仍可见且半透明的关键做法
必须把按钮作为子节点动态插入到当前全屏元素内部，并用内联样式硬编码透明度：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听
fullscreenchange事件，在进入全屏时，用document.fullscreenElement.appendChild(button)把按钮挂到全屏节点上 - 按钮本身必须设
position: absolute+top/left定位，不能依赖父容器布局 - 透明度只能用
opacity: 0.8，不要用rgba()背景色替代——后者在全屏下可能被强制重绘为不透明 - 避免使用
pointer-events: none或visibility: hidden，这些在全屏上下文中行为不稳定
示例关键代码：
const btn = document.getElementById('custom-play-btn');
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
document.fullscreenElement.appendChild(btn);
btn.style.cssText = 'position: absolute; top: 20px; right: 20px; opacity: 0.85; background: rgba(0,0,0,0.4); border: none;';
}
});
为什么 mix-blend-mode 或 backdrop-filter 在全屏下基本无效
全屏渲染路径绕过常规合成器，导致：
- mix-blend-mode 对全屏 video 无作用（它只混合同层兄弟元素）
- backdrop-filter 在 Safari 和部分 Chrome 版本中对全屏元素完全禁用
- 即使强行套 isolation: isolate，也无法触发预期的背景穿透效果
所以半透明质感只能靠按钮自身 opacity + rgba() 背景叠加实现，别试图“融合”到视频画面里。
容易忽略的兼容性细节
Firefox 全屏后会自动隐藏所有非媒体控件，必须给按钮加 data-no-hide="true" 并在 CSS 中写死 display: block !important；
Safari 对 document.fullscreenElement.appendChild() 支持较晚（iOS 16.4+），旧版本需 fallback 到 webkitEnterFullscreen() 并监听 webkitbeginfullscreen 事件；
按钮尺寸建议 ≥ 44×44px，否则 iOS 全屏下点击区域识别失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
