检测ios11设备是否处于低功耗模式，以防止在正常情况下正确自动播放视频的坏UX

Question

我在iOS11设备上自动播放视频遇到了一个很大的问题(至少在iPhone7IOS11.2.5Safari上进行了测试)。

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

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

但有一个问题:上周，我在我的女友11.2iphone上测试网站和boum...videos被屏蔽。我不明白为什么..。发现原因是..。我正在用她的手机充电！

事实上，在ios11上，当你给手机充电时，它会自动进入“低功耗模式”hehe...thus阻塞自动播放视频。如果您进入Settings > itune & apple商店并进入“自动播放视频”设置，您将看到(当它在低功耗模式下充电时)：

“低功耗模式下不提供自动播放视频”.

因此，基本上成千上万的世界各地的用户谁将连接到我们的网站，同时充电将有一个破碎的经验，没有视频加载！(我们在很大程度上依赖于自动播放的视频，即使在用户激活声音之前就已经静音了)

我们如何检测到这一点，并至少给用户一个解释的信息，在这种情况下，例如“我们的视频不能播放，而低功耗模式(或充电您的手机)。

我知道苹果的繁荣是为了保护用户不受自动播放不良体验的影响，但在这里，我们尽了全力改变代码库，以遵守他们的新政策，但我们在文档中看不到我们的网络应用程序(javascript)如何能够检测到低功耗模式或手机充电状态)。这是不公平的:如果他们在某些情况下改变了行为，比如低功耗模式，他们应该按照自己的规则行事，让我们通过让我们检测设备状态来创造一种顺从但高质量的体验。这样我们就可以为用户提供某种B计划或后备方案。

你知不知道如何检测到iphone正在充电，或者在javascript模式下为web应用程序充电？或者如何处理这件事？

Answer 1

也遇到了这种情况，发现iOS在低功耗模式下使用suspend事件(事件) .此事件实际上发生在视频加载了几个帧并发送了一些加载事件之后。

使用这个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
});

Answer 2

我认为您提到的设置属性仅适用于App中的视频预览，而不适用于任何WebViews。事实上，我已经在我的手机上尝试过这个W3演示，如果将muted或inline添加到视频标签中，它会自动播放很好的。(看起来是这样的：<video width="320" height="240" controls autoplay muted inline>)。

注:我的手机目前是17%，它的工作，无论我是否充电，低功耗模式似乎也没有影响。我在iOS 11.4Beta上。

重要的是这些附加的标记，这些标记记录在这个WebKit博客中。

Answer 3

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

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