Search code examples
htmlcross-browserhtml5-video

What is the difference between using <img> vs poster attribute as a fallback image for HTML5 video tag?

How would a browsers actually fallback with each of those during video unavailability, slow loading, OS restrictions or no support for HTML5 tag?

<video src="/video.mp4" poster="/fallback-image.png" />

<video src="/video.mp4">
  <img src="/fallback-image.png" />
</video>

<video src="/video.mp4" poster="/fallback-image.png">
  <img src="/fallback-image.png" />
</video>

What is the cross-browser preferred method? And does it make sense to use both?

Solution

  • The poster is not a fallback image. It's an image to show prior to video playback.

    Adding an img element as content of the video element only works as fallback for the case where the browser is very old and doesn't know what a <video> element is. Clearly, if the browser doesn't know what a <video> element is, it's not going to know what the poster attribute does.