12

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)

mpaf
  • 5,493
  • 4
  • 34
  • 38

3 Answers3

22

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>
DarkAjax
  • 15,175
  • 11
  • 52
  • 65
  • Thanks, yes it does work! My question is in fact wrong, the browsers I tested will display tag ONLY when – mpaf Mar 16 '12 at 10:14
  • As of Dec 2015, the img `src` does not support gifs. If you want a fallback gif, check out the [poster](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) attribute. I wrote a [blog post](https://nishanths.github.io/blog/gif-fallback-html5-video/) with an example. – nishanthshanmugham Dec 28 '15 at 23:52
  • For me the Poster Image got displayed only without 'controls' Example: – nimey sara thomas Sep 27 '20 at 15:39
3

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.

Rich Bradshaw
  • 67,265
  • 44
  • 170
  • 236
0

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.

Nouman Ahmad
  • 101
  • 1
  • 11