移动端全屏模式下隐藏HTML5 video标签控件（iOS/Android）

一、全屏视频控件无法隐藏的问题 #

iOS 16.2 的 Safari 中，当视频进入原生全屏模式（通过webkitEnterFullscreen或直接点击视频全屏按钮触发）时，系统会强制接管播放器，网页的 CSS 伪元素（如::-webkit-media-controls-*）完全无法生效——这就是你用桌面 Chrome 有效但真机无效的核心原因。

解决思路是放弃原生全屏播放器的接管，通过自定义控件+容器全屏的方式实现：

修改步骤： #

1. 视频标签配置：给<video>添加playsinline属性（允许 iOS 内联播放，避免自动触发原生全屏），移除原生controls属性，完全用自定义控件替代：

   <video id="video" width="400" autoplay loop mute playsinline>
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
     <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
     Your browser does not support HTML video.
   </video>
   

2. 添加自定义控件：自己实现播放/全屏按钮，样式按需调整：

   <div class="custom-controls">
     <button id="playBtn">播放/暂停</button>
     <button id="fullscreenBtn">全屏</button>
   </div>
   

3. 调整全屏逻辑：不让视频直接全屏，而是让视频所在的容器进入全屏，这样视频始终处于网页 DOM 控制下，原生控件不会强制显示：

   const fullscreenBtn = document.getElementById('fullscreenBtn');
   const videoContainer = document.querySelector('.video-container-layout');
   
   fullscreenBtn.addEventListener('click', () => {
     if (videoContainer.requestFullscreen) {
       videoContainer.requestFullscreen();
     } else if (videoContainer.webkitRequestFullscreen) {
       videoContainer.webkitRequestFullscreen();
     }
     // 进入全屏后隐藏自定义控件（按需设置）
     document.addEventListener('fullscreenchange', toggleControls);
     document.addEventListener('webkitfullscreenchange', toggleControls);
   });
   
   function toggleControls() {
     const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
     document.querySelector('.custom-controls').style.display = isFullscreen ? 'none' : 'block';
   }
   

4. CSS 隐藏内联状态原生控件：保留原有 CSS 规则，确保非全屏时原生控件不显示：

   video::-webkit-media-controls-container,
   *::-webkit-media-controls-panel,
   *::-webkit-media-controls-play-button,
   *::-webkit-media-controls-start-playback-button {
     display: none !important;
     opacity: 0 !important;
     -webkit-appearance: none;
   }
   .video-container-layout {
     width: 100%;
     height: 100%;
     display: block;
     position: relative;
   }
   .custom-controls {
     position: absolute;
     bottom: 20px;
     left: 20px;
     z-index: 10;
   }
   

二、退出全屏视频暂停的问题 #

iOS Safari 退出全屏时暂停视频是系统默认行为，包括 YouTube 在内的站点也受此限制。解决方法是监听全屏退出事件，手动恢复播放：

// 监听全屏退出事件
document.addEventListener('fullscreenchange', () => {
  const video = document.getElementById('video');
  if (!document.fullscreenElement && !video.paused) {
    video.play().catch(err => console.log(err));
  }
});

document.addEventListener('webkitfullscreenchange', () => {
  const video = document.getElementById('video');
  if (!document.webkitFullscreenElement && !video.paused) {
    video.play().catch(err => console.log(err));
  }
});

注意：iOS 要求视频播放必须由用户交互触发，若视频为静音自动播放状态，退出全屏后恢复播放是允许的；若为非静音状态，需确保之前有用户交互（比如点击过播放按钮），否则play()会被浏览器阻止。

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