I'm developing my portfolio using React and Gatsby and I am using a video to create an animated shadow. The video is in autoplay and works fine using autoplay, muted and playsinline tags However the animation doesn't play on Safari when Low Power Mode is on.
Animation playing (low power mode off)
Animation not playing (low power mode on)
I know that Apple blocks the video in order to save battery but as I can see on their website, particularly on their Pro Display XDR (https://www.apple.com/pro-display-xdr/), they use a fallback image when the video can't play. I wanted to know what was the best way to make the same thing using React?
Thank you, Thomas
You can use the poster attribute in your video tag.
<video width="250" height="250" playsinline autoplay muted loop poster="https://via.placeholder.com/250&text=I%20am%20Poster">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>No Source or failed video:
<video playsinline autoplay muted loop width="250" height="250" poster="https://via.placeholder.com/250&text=I%20am%20Poster">
<source src="#"
type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>More information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster