javascript - 检测 ios11 设备是否处于低功耗模式，以防止在正常正确自动播放视频时出现不良用户体验

Question

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

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

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

但是有一个问题:上周，我在我的 girklfriend 11.2 iphone 上测试网站和 boum...视频被屏蔽了。我不明白为什么...查明原因是...我在给电池充电时正在使用她的手机!

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

"autoplay video are not available while low power mode is on"....

因此，基本上全世界成千上万在充电时连接到我们网站的用户将体验不佳且无法加载视频! (我们严重依赖自动播放视频，即使在用户激活声音之前静音也是如此)

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

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

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

Answer 1

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

使用此 suspend 事件，我们能够显示后备 UI。为安全起见，如果视频再次播放，我们可以恢复此 UI，例如用户交互。

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

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

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