Detect If Ios11 Device Is In Low Power Mode To Prevent Bad Ux On Normally Correctly Autoplaying Video

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

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

Solution 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.

Solution 3:

I find the best option is just to simply convert the video into a gif using "" not that best solution in the world, but it works

Solution 4:

This event handler can be used.

jwplayer().on('autostartNotAllowed')

Fired when the player is configured to autostart but the browser's settings are preventing it.

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