'how to play inline video more than once in ios safari when in low power mode

iOS safari appears to limit inline videos to play just once when in lower power mode, even if you try to play the video in response to a user interaction. You can test this to see:

document.querySelector('video').addEventListener('click', e => {
  e.target.play().then(() => alert('played after click')).catch(err => alert(`failed to play after click: ${JSON.stringify(err)}`));
});
<video src='https://media.tenor.com/videos/01faecfbc10705494038b7541e6d8756/mp4' autoplay playsinline></video>

When low power mode is OFF, you can tap the video and it always plays each time (you'll see an alert each time you tap and it plays). However, when low power mode is ON, only your first tap will play the video and show the alert. Subsequent taps do nothing, not even triggering the .catch handler I put on the .play() call.

How can I fix this? Note that even though the autoplay attribute is present on the video, I don't mind that it doesn't autoplay when low power mode is on. I do need it to always play when the video is clicked.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source