Autoplay video IPhone low power mode not working

Question

I have a video which is integral to my design and on load the video plays on all devices except IPhones while in low power mode. Using the autoplay attribute the video will start on load in most browsers.

<div class="footage">
    <video width="320" height="240" autoplay muted playsinline loop id="videoMob">
        <source src="./img/video.mp4" type="video/mp4">
    </video>
</div>

After finding out that this did not work I decided to add a .ready function in jquery which activates the video to play if paused on load. Disappointingly this also did not work.

$( document ).ready(function() {
    var video = $('#videoMob')[0];
    video.paused ? video.play() : video.pause();
});

Please suggest any other ideas?

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

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

Answer 2

The answer from @paulcol. wasn't working for me as the suspend event fired every time... not sure why. On browser, on mobile, low-battery, full batttery, it always fired.

Below is a snippet which relied on the play() function not working (if the battery was low, for example) and adds the controls UI to the video if it doesn't...

<video id="myVideoID" preload="true" muted playsinline autoplay>
    <source src="..." type="video/mp4" >
</video>   

const videoElement = document.getElementById('myVideoID');
videoElement.play().then(() => {}).catch((error) => {
    videoElement.setAttribute("controls","controls"); 
});