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)

Solution 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>

Solution 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.