iOS低电量模式下网页背景自动播放视频播放图标隐藏求助

1. 精准检测低电量模式，针对性替换内容 #

利用浏览器的navigator.getBattery() API，可以直接检测设备是否开启了省电模式（包括iOS的低电量模式），仅在该模式下隐藏视频并显示 fallback 图片，不会影响正常iOS设备的视频播放。

代码示例：

async function handleLowPowerMode() {
  try {
    const battery = await navigator.getBattery();
    // 检测是否启用省电模式
    if (battery.saverEnabled) {
      const video = document.querySelector('.bg-video');
      const fallbackImg = document.querySelector('.bg-fallback-img');
      video.style.display = 'none';
      fallbackImg.style.display = 'block';
    }
  } catch (error) {
    // 针对不支持getBattery()的场景，降级处理：尝试播放视频，失败则替换
    const video = document.querySelector('.bg-video');
    video.play().catch(() => {
      video.style.display = 'none';
      document.querySelector('.bg-fallback-img').style.display = 'block';
    });
  }
}

// 页面加载时执行检测
window.addEventListener('load', handleLowPowerMode);
// 监听电池状态变化，适配模式切换场景
navigator.getBattery().then(battery => {
  battery.addEventListener('chargingchange', handleLowPowerMode);
  battery.addEventListener('levelchange', handleLowPowerMode);
});

2. 强制隐藏iOS播放控件（CSS方案） #

iOS的播放按钮属于WebKit的内置控件，直接针对其伪元素设置样式即可隐藏。注意要确保视频元素未添加controls属性，同时结合覆盖层兜底：

.bg-video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 隐藏WebKit播放控件 */
.bg-video::-webkit-media-controls-play-button {
  display: none !important;
  opacity: 0 !important;
}
.bg-video::-webkit-media-controls {
  display: none !important;
}

/* 低电量模式下显示 fallback 图片覆盖层 */
.low-power .bg-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的 fallback 图片路径') center/cover no-repeat;
}

结合JS检测结果，给body添加low-power类即可触发该样式：

// 在handleLowPowerMode函数中添加
document.body.classList.add('low-power');

3. 优化视频属性，减少播放控件触发概率 #

确保视频元素添加以下属性，符合iOS自动播放的规范，即使低电量下无法播放，也能降低系统强制显示播放按钮的概率：

<video class="bg-video" muted playsinline autoplay loop poster="fallback-img.jpg">
  <source src="背景视频路径.mp4" type="video/mp4">
</video>

• muted：静音是iOS自动播放的必要条件
• playsinline：允许视频在页面内播放而非全屏
• poster：设置视频无法加载时显示的兜底图片

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