I have a WebM video using the mobile browser. When these browsers don't support WebM, I want to show an image:
<video
src={video}
autoPlay>
<img src={poster} />
</video>
But in mobile safari/chrome/firefox browser in iOS, It shows a black background with an can't play icon. It doesn't fallback to show an image as I expect.
And I also try to add poster
attribute to video
tag:
<video
poster={poster}
src={video}
autoPlay>
<img src={poster} />
</video>
And this:
<video
loop
autoPlay>
<source src={video} type="video/webm" />
<img src={poster} style={{ width: '100%', height: '100%' }} />
</video>
It doesn't work, either.
Anyone have a clue on how to show an image When the browser doesn't support WebM.