检测 ios11 设备是不是处于低功耗模式，以防止正常正确自动播放视频时出现不良 UX

Posted 2023-03-05

【中文标题】检测 ios11 设备是不是处于低功耗模式，以防止正常正确自动播放视频时出现不良 UX

【英文标题】：Detect if ios11 device is in low power mode to prevent bad UX on normally correctly autoplaying video检测 ios11 设备是否处于低功耗模式，以防止正常正确自动播放视频时出现不良 UX

【发布时间】：2018-10-28 06:43:28

【问题描述】：

我在 ios11 设备上自动播放视频时遇到了一个大问题（至少在 iphone 7 ios 11.2.5 safari 上测试过）。

当有关自动播放视频的政策发生变化时，我们的自动播放视频停止工作。我们的应用严重依赖视频。

我们彻底改变了用户与视频互动的所有步骤，以确保它们不会被阻止，并且现在默认情况下它们被静音，并且在用户手势后触发自动播放。所以视频会自动静音，我们认为我们已经工作了几天。

但是有一个问题：上周，我在我的 girklfriend 11.2 iphone 上测试网站，然后 boum...视频被阻止了。我不明白为什么... 发现原因是……我正在用她的手机给电池充电！

确实在ios11上，当你给手机充电时，它会自动进入“低功耗模式”嘿嘿......从而阻止自动播放视频。如果您进入“设置”>“iTunes 和苹果商店”并进入“自动播放视频”设置，您会看到（在低电量模式下充电时）：

“低电量模式开启时自动播放视频不可用”....

所以基本上全世界成千上万的用户会在充电时连接到我们的网站，他们的体验会很糟糕并且没有视频加载！ （即使在用户激活声音之前静音，我们也非常依赖自动播放视频）

在这种情况下，我们如何检测到这一点并至少向用户提供解释性消息，例如“我们的视频在低电量模式（或为手机充电）时无法播放。

我了解 Apple 致力于保护用户免受自动播放不良体验的影响，但在这里我们尽一切努力更改我们的代码库以符合他们的新政策，但我们在他们的文档中没有看到我们的网络应用程序 (javascript) 如何检测低功耗模式'或手机充电状态）。这不公平：如果他们在某些情况下（例如低功耗模式）改变行为，他们应该按照自己的规则行事，让我们通过检测此设备状态来创造合规但高质量的体验。这样我们就可以为用户制定某种 B 计划或备用方案。

知道如何在 web 应用程序的 javascript 中检测 iPhone 正在充电或处于低功耗模式吗？或者如何处理？

【问题讨论】：

我已经在这里回答了这个问题的解决方案：***.com/questions/43570460/…

【参考方案1】：

也遇到过这个问题，发现 iOS 在低功耗模式下使用了suspend 事件 (https://developer.mozilla.org/en-US/docs/Web/API/htmlMediaElement/suspend_event)。此事件实际上发生在视频加载了几帧并发出了一些加载事件之后。

使用这个suspend 事件，我们能够显示一个备用用户界面。为安全起见，如果视频再次播放（例如在用户交互时），我们可以恢复此 UI。

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('suspend', () => 
  // suspended loading. Show play UI (or fallback image)..
);

videoElement.addEventListener('play', () => 
  // remove play UI
);

【参考方案2】：

我认为您提到的设置属性仅适用于 App Store 中的视频预览，不适用于任何 WebView。事实上，我现在已经在我的手机上尝试了这个W3 Demo，它自动播放很好如果我将muted 或inline 添加到视频标签。 （所以它看起来像这样：<video width="320" height="240" controls autoplay muted inline>）。

注意：我的手机目前电量为17%，充电与否都可以，低电量模式似乎也没有影响。我使用的是 iOS 11.4 Beta。

重要的是这些在WebKit Blogpost 中记录的附加标签。

【讨论】：

这很奇怪：这里有 youtube 视频（这就是我们使用的，它们确实有自动播放和在线播放功能），它在不处于低功耗模式时工作，而在低功耗模式下不工作。其他人也经历过同样的事情：***.com/questions/47655077/… 或 ***.com/questions/43570460/…

感谢 webkit 链接，这是我们进行代码库更改时的“基本”指南。但没有关于它的低电量模式。我们确实尊重所有这些新政策，在更改我们的代码库之前，新政策阻止了我们的自动播放视频，但现在它们正在发挥作用。至少在非低功耗模式下:)

我正在尝试找到一个公共 url 进行测试，也许可以给你，以便我们进行比较。顺便说一句，我正在测试 safari，而不是 chrome。

第二个注意事项，在启用低功耗模式的情况下加载this link 时，第一张动态图像实际上不会自动播放。

现在看看我如何通过检测低功耗模式的一些 css 副作用来破解这个问题：例如***.com/questions/47929754/…。也许当低功耗模式打开时这些奇怪的 CSS 副作用可以帮助我检测到它:) 但是 SO 链接中的这个会迫使我在 dom 中创建另一个视频元素:(

【参考方案3】：

我发现最好的选择就是简单地将视频转换为 gif 使用 "" 不是世界上最好的解决方案，但它可以工作

【参考方案4】：

可以使用此事件处理程序。

jwplayer().on('autostartNotAllowed')

当播放器配置为自动启动但浏览器设置阻止它时触发。

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('autostartNotAllowed', (e) => 
  console.log(e)
  // message: "The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."
  // name: "NotAllowedError"
  // reason: "autoplayDisabled"
);

videoElement.addEventListener('play', () => 
  // remove play UI
);