We have a website with a background video. And have an issue, when a user is on Low power mode on IOS devices (iPhone, Mac, etc.).
Is it possible to handle only low power mode and set fallback image instead of video with play button?
I saw a variant with a suspend event, but it fired also when the video fully loaded, so it's not a correct solution for us.
You can use javaScript battery API to track the battery status
Seems I found a solution: The most correct way, in my opinion, is just handle error throwing (in catch block) and set a fallback image instead of video.
FYI: This solution is relevant only when the video is in the background (from a UX point of view)
So the solution is:
`
useEffect(() => {
if (videoRef.current) {
videoRef.current?
.play()
.then(() => {})
.catch((error) => {
setVideoPaused(true);
return error;
});
}
}, []);
`