'Is it possible to detect low power mode using JavaScript?

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.

javascript reactjs

Solution 1:^[1]

You can use javaScript battery API to track the battery status

Solution 2:^[2]

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;
      });
  }
}, []);

Sources

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

Source: Stack Overflow

Solution	Source
Solution 1	Yosi Leibman
Solution 2	Alexei Mairyn

'Is it possible to detect low power mode using JavaScript?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]