HTML视频播放器退出全屏静音功能iOS兼容问题修复求助

问题根源 #

你的代码在iOS上异常主要是几个兼容性细节没处理到位：

• iOS Safari的全屏API是小写s的webkitRequestFullscreen，你写的大写S无法触发全屏
• 全屏事件的逻辑完全搞反了，原代码会在进入全屏时静音、退出时开声音，和需求相反
• 没处理iOS的用户交互限制：媒体解除静音必须由用户手势直接触发，异步操作会被阻止
• 存在冗余代码（比如重复调用play()、未使用的变量）

修正后的完整代码 #

<div class="content">
  <video
    autoplay
    muted
    loop
    id="videoAnimation"
    playsinline
  >
    <source
      src="https://videosource.mp4"
      type="video/mp4"
    />
    Your browser does not support HTML5 video.
  </video>
</div>
<div class="heading">
  <button
    class="fullScreen"
    onclick="toggleFullscreen()"
  ></button>
</div>

<script>
const video = document.getElementById("videoAnimation");

// 统一处理全屏切换
function toggleFullscreen() {
  const isFullscreen = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement || 
                       document.msFullscreenElement;

  if (!isFullscreen) {
    // 进入全屏：兼容所有浏览器前缀
    if (video.requestFullscreen) video.requestFullscreen();
    else if (video.webkitRequestFullscreen) video.webkitRequestFullscreen();
    else if (video.mozRequestFullScreen) video.mozRequestFullScreen();
    else if (video.msRequestFullscreen) video.msRequestFullscreen();
    
    // 用户手势触发解除静音，符合iOS要求
    video.muted = false;
  } else {
    // 退出全屏
    if (document.exitFullscreen) document.exitFullscreen();
    else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if (document.msExitFullscreen) document.msExitFullscreen();
    
    video.muted = true;
  }
}

// 监听全局全屏状态变化（兼容所有浏览器）
const fullscreenEvents = [
  'fullscreenchange',
  'webkitfullscreenchange',
  'mozfullscreenchange',
  'msfullscreenchange'
];

fullscreenEvents.forEach(event => {
  document.addEventListener(event, () => {
    const isFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;
    // 同步静音状态：全屏时开声音，退出时静音
    video.muted = !isFullscreen;
  });
});
</script>

核心修改点 #

1. 添加playsinline属性：iOS Safari要求内联播放视频必须加这个属性，避免自动全屏，保证初始静音循环正常
2. 修正全屏API大小写：iOS的webkitRequestFullscreen是小写s，之前的大写版本无法触发全屏
3. 统一全屏切换逻辑：在用户点击按钮时同步处理全屏和静音切换，完全符合iOS的用户交互限制（必须手势触发解除静音）
4. 监听文档级全屏事件：全屏状态是全局的，监听document的事件比监听video元素更可靠，同时兼容所有浏览器前缀
5. 移除冗余代码：删掉没用的btn变量、函数参数id和重复的play()调用（autoplay属性已经足够）

额外提示 #

• 确保视频是iOS支持的格式：H.264编码的MP4是标准兼容格式，别用其他小众编码
• 如果用户通过系统按钮退出全屏，我们的事件监听会自动同步静音状态，覆盖所有退出场景

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