JavaScript中如何检测iOS11的低功耗模式？

Question

有没有JavaScript API可以检测iOS 11 Safari的低功耗模式？ 目前我还没有找到相应的信息。

- Arnaud Leyder

Answer 1

一个解决方法如下：

在网页中插入一个隐藏的视频，并将自动播放设置为“开”，然后检测该视频的“suspend”事件。每当它被调用时，“电源模式打开”。

以下是脚本：

const videoElement = document.getElementById('ID_of_video');
    videoElement.addEventListener('suspend', () => {
        // suspend invoked
        // show play button
        // iphone is in low power mode
    });

    videoElement.addEventListener('play', () => {
        // video is played
        // remove play button UI
        // iphone is not in low power mode
    });

您还可以在此处阅读说明：在低电量模式下播放视频

- Shakti

---

很抱歉，这对我没有用。即使没有开启低功耗模式，挂起事件也会被触发。你是如何使其工作的？尽管视频已自动播放，但我也没有获得播放事件。 - Aditya P S

@AdityaPS，你能分享一下URL或者你的代码片段吗？ - Shakti

对我来说，suspend 总是被发出。 - Drew Baker

暂停事件总是在视频下载完成时触发。这就是你所看到的。 - Joe Lloyd

挂起事件对两者都会调用，这个解决方案不够完美。 - Rutvij07

Answer 2

.catch((error) => {
  if (error.name === "NotAllowedError") {
     //low power mode
}

我也曾在同样的概念上苦苦挣扎，但这个有用的链接帮了我很多: https://video-dev.github.io/can-autoplay/

结果：视频静音 (Error "NotAllowedError": 请求在当前环境下被用户代理或平台禁止，可能是因为用户拒绝了权限。

现在我使用一个promise检查视频是否正在播放，如果是，那就太好了。否则，我会捕获NotAllowedError，似乎每次都能正常运行。

- Seb G

Answer 3

iOS上的Safari不支持访问低电量模式设置状态（甚至不支持访问电池电量）。

- Tamás Sengel

---

是的，我也这么想。只是想确认一下。此外，似乎电池状态 API 已经过时了（除非这是 MDN 的错误）：https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API - Arnaud Leyder

Answer 4

对于iOS 16 Safari，可以通过检查setInterval的实际间隔来检测“低功耗模式”（或称为省电模式），因为在低功耗模式下会发生累积延迟效应。

对于桌面版Chromium 109，可以通过检查requestAnimationFrame的帧率来检测“节能模式”（或称为省电模式）。

请参考在线演示：

• 检测省电模式（在<iframe>中可能无法正常工作）
• requestAnimationFrame帧率检测

[^1]: 累积延迟意味着实际平均间隔明显大于给定间隔。

- fuweichin

---

我在iPhone 8上使用iOS 16.4尝试了你的两个代码片段。电池充满电时，第一种解决方案无论我是否在设置中启用低功耗模式都会报告“低功耗模式？是”。FPS检测代码显示28〜30 FPS，无论是否开启低功耗模式。因此，这两种解决方案对我都没有起作用。低功耗模式对于视频播放肯定有影响-只有在打开低功耗模式时才会拒绝自动播放视频。我想知道是否还有其他解决方案... - Gene Pavlovsky

感谢您报告问题，检测代码在Safari的<iframe>中无法按预期工作，因此请在顶级窗口中运行它。在power-saving.js中定义了一个阈值常量1.3，可能不适用于除iPhone 8之外的设备。 - fuweichin

在测试中运作良好，但在实际生产环境中却不行。一旦网站加载了一些大型资源，比例就会变高，并且在启用或禁用低功耗模式的情况下，采集的样本数非常接近，几乎无法区分。1.3 这个常量也与手机型号有很大关联。例如，在 iPhone 6 上，我需要一个 2.5。 - Marco Martinelli

Answer 5

与“挂起”事件的建议类似，使用带有autoplay loop muted属性的隐藏视频，然后在视频被挂载时监听播放事件，如下所示：

testVideo
    .play()
    .then(() => {})
     .catch((error) => {
        //Do something like adding controls to allow user to manually play
    });
});

这是截至2022年3月的解决方案，因为浏览器不会触发suspend事件以取消自动播放。

- nvassalo

---

这似乎正确触发了（答案不是，它总是触发），但如果能进一步解释一下这里发生了什么就太好了。谢谢。 - dungey_140

如果使用 Safari 的低功耗模式（Mac 也可以）检查该代码，你会发现在尝试播放视频时会抛出“访问被拒绝”的异常。 - Alex Newman

对我来说不起作用。无论是低电量模式还是非低电量模式，在 iPhone 上始终会出现错误。 - Rehmat

如果我还添加playsinline属性，对我来说它有效。 - gang