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

image html video tags alt
mpaf picture mpaf · Mar 15, 2012 · Viewed 25.5k times · Source

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)

Answer

DarkAjax picture DarkAjax · Mar 15, 2012

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>

Related questions

How to prevent downloading images and video files from my website?

How to prevent downloading images and video files from my website? Is it possible? What would be the best way to do this?

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to display Base64 images in HTML?

I'm having trouble displaying a Base64 image inline. Can someone point me in the right direction? <!DOCTYPE html> <html> <head> <title>Display Image</title> </head> <body> &…

Read More