iOS低功耗模式开启会触发什么JavaScript事件？如何检测该状态？

可行实现方案 #

这里提供两种可落地的方案，优先推荐第一种，适配性更强：

方案1：直接CSS强制覆盖隐藏原生播放按钮（成本最低，无需检测状态） #

Safari插入的默认播放按钮属于webkit内核的伪元素，可以直接通过CSS全局隐藏，不管低功耗模式是否开启都生效：

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}

如果你的video标签没有开启默认controls属性，只需要隐藏前两个伪元素即可。

方案2：通过播放行为间接检测低功耗模式（需要JS逻辑适配） #

iOS低功耗模式下Safari会强制阻断带音频/视频的自动播放逻辑，哪怕你已经加上了autoplay muted playsinline所有合规属性，调用video.play()依然会被拒绝，你可以基于这个特性做判断：

const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent) && !window.MSStream;
// 摄像头流获取成功后执行
async function initVideo(stream) {
  const video = document.querySelector('video');
  video.srcObject = stream;
  if (isIOS) {
    try {
      await video.play();
      // 播放成功，说明未开启低功耗模式，走正常逻辑
    } catch (err) {
      // 播放被拒绝，基本可以判定为开启了低功耗模式
      // 这里做自定义样式适配，比如展示你自己的播放按钮，引导用户点击触发播放
    }
  } else {
    video.play();
  }
}

注意事项：

• 不要单独依赖suspend事件做判断，该事件仅代表媒体资源加载暂停，网络波动、资源加载完成等场景都会触发，和低功耗模式无强绑定关系
• 如果确实需要明确获取低功耗模式的开关状态，iOS 15+以上的Safari支持navigator.getBattery()接口，低功耗模式下电池放电时间会被强制限制为2小时以内，可结合电池电量做辅助判断，但准确性不如方案2的播放行为检测。

内容的提问来源于stack exchange，提问作者Aditya P S