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

Question

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

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

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

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

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

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

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

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

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

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

标签： javascriptiosiphonesafarihtml5-video

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
});