Question

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

当有关自动播放视频的政策更改到来时，我们的自动播放视频停止了工作。我们的应用程序在很大程度上依赖于视频。

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

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

确实在ios11上，当你为手机充电时，它会自动进入低功耗模式＆＃34;呵呵......因此阻止了自动播放视频。如果你进入设置＆gt; itune＆amp;苹果商店并转到＆＃34;自动播放视频＆＃34;设置你会看到（当它在低功耗模式下充电时）：

＆＃34;当低功耗模式开启时，自动播放视频不可用＆＃34; ....

因此，世界各地成千上万的用户在充电时将连接到我们的网站将会有破碎的体验而且没有视频加载！（即使在用户激活声音之前静音，我们也非常依赖自动播放视频）

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

我理解苹果茁壮成长以保护用户形成自动播放不良体验但是我们在这里努力改变我们的代码库以符合他们的新政策但我们在他们的文档中看不到我们的网络应用程序（javascript）如何能够检测到低功耗模式＆＃39;或手机充电状态）。这是不公平的：如果他们在某些情况下改变行为，例如低功耗模式，他们应该按照自己的规则进行游戏，让我们通过让我们检测这个设备状态来创建一个合规但高质量的体验。这样我们就可以为用户提供一种B计划或后备计划。

任何想法如何在网络应用程序的javascript中检测到iphone正在充电或处于低功耗模式？或者如何处理这个？

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

Answer 2

我发现最好的选择只是使用“”将视频简单地转换为gif，而不是世界上最好的解决方案，但是它能起作用

Answer 3

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

注意：我的手机目前处于17％，无论我是否正在充电，它都能正常工作，低功耗模式似乎也没有影响力。我在iOS 11.4 Beta上。

这些附加标签的重要性在于WebKit Blogpost。

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

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

4 个答案: