How can I display an image if browser does not support HTML5's <video> tag

Question

Does anyone know how can I display an image for the browsers which don't support the tag ? Displaying a text such as in:

<video src="video.mp4" type="video/mp4">
    Your browser does not support the <video> tag
</video>

Is easy, but if I replace the text with an img tag, it will always show the image, even when the browser DOES support the video tag.

Thanks for sharing your knowledge

(EDIT) This is not the case, my tests were wrong and img tag indeed gets rendered only when video is not supported (e.g. Safari 5)

Overby

Answer 1

I was just checking this link, as well as HTML5's spec, so this code should work for you:

<video controls="controls" poster="<your image poster if applicable>">
    <source src="video.mp4" type="video/mp4" />
    <img src="<your No video support image>" title="Your browser does not support the <video> tag" />
</video>

Afterglow

Thanks, yes it does work! My question is in fact wrong, the browsers I tested will display <img> tag ONLY when <video> is not supported. – Overby

As of Dec 2015, the img src does not support gifs. If you want a fallback gif, check out the poster attribute. I wrote a blog post with an example. – Julenejulep

For me the Poster Image got displayed only without 'controls' Example: <video loop="true" autoplay="autoplay" muted poster="img/1920x1080/Introduction.png" > – Histogen

Answer 2

Using javascript, you can run:

var html5video = !!document.createElement('video').canPlayType;

That will be true or false depending on whether you have support or not. You can then use javascript to replace the video tag with an image, or, easier, just set the video to display:none; and the image to display:block; or vice versa.

Padauk

I assumed you'd tried that and that it didn't work! Oh well, when ever I can use !! (bang bang) it makes me happy! – Padauk

Answer 3

One can use the poster attribute of the video tag.

<video controls poster="/images/w3html5.gif">

  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster

Note: This doesn't support Internet explorer.

Lobby