Detect if ios11 device is in low power mode to prevent bad UX on normally correctly autoplaying video

Question

I am running into a huge issue with autoplaying videos on iOS11 devices (at least tested on iphone 7 ios 11.2.5 safari ).

When the change in policy about autoplaying videos arrived, our autoplaying videos stopped working. Our app heavily depend on videos.

We deeply changed all the steps for users to interact with videos to make sure they're not blocked and they're now muted by default and autoplay is triggered after user gesture. so videos DO autoplay muted and we thought we were doing after already days of work.

But there's an issue: Last week, I was testing on my girklfriend 11.2 iphone the website and boum...videos were blocked. I did not understand why... Found out the reason was... I was using her phone while it was charging the battery!

Indeed on ios11, when you put to charge the phone, it automatically gets in "low power mode" hehe...thus blocking autoplay videos. If you go into Settings > itune & apple store and go to the "autoplay video" setting you'll see (while it's charging in low power mode) :

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

So basically thousands of users across the world who will connect to our website while charging will have a broken experience and no video loading ! (we rely heavily on autoplaying videos even if muted before user activates the sound)

How can we detect this and at least give an explainer message to user in that case such as "our videos can't be played while low power mode (or charging your phone).

I understand apple thrives to protect users form autoplay bad experience but here we made all the efforts to change our codebase to comply with their new policies but we see nowhere in their documentation how our web app (javascript) can detect the low power mode 'or the phone charging status). It's not fair: if they change the behavior in certain cases such as low power mode, they should play by their own rule and let us create a compliant but quality experience by letting us detect this device status. So that we could have a sort of plan B or fallback for users.

Any idea how to detect that an iphone is charging or in low power mode in javascript for a web app ? or how to deal with this ?

Answer 1

Came across this too, and found that iOS uses the suspend event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event) on low-power-mode. This event actually occurs after the video has loaded the few frames and emmited some on load events.

Using this suspend event we're able to show a fallback UI. For safe measure we can revert this UI if the video ever plays again, say on user interaction.

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

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

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

Answer 2

I think the settings property you mentioned only applies to video previews in the App Store, not to any WebViews. In fact, I've tried this W3 Demo on my phone right now and it autoplays fine if I add either muted or inline to the video tag. (So it would look like this: <video width="320" height="240" controls autoplay muted inline>).

Note: My phone is currently at 17%, it works whether I'm charging or not, and Low Power Mode seems to have no influence either. I'm on iOS 11.4 Beta.

What's important are these additional tags which are documented in this WebKit Blogpost.