How to detect there are no available formats in HTML5 video?

This code shows messages for old browsers that does not support video element.

<video controls>
    <source src="./foo.mp4" />
    <p>Use new browser.</p>
</video>

Firefox supports video element and MP4/H.264 format in Windows 7+ but does not support that format in Windows XP.

I'd like to show messages for Windows XP users to install plugin.

Solution

One way (if I understand the question correctly) would be to have your video element with the default fall-back mechanism, and then supplement it using JavaScript for specific format detection and if you don't find a supported format, even though the video element is there display an alternate message

canPlayType(format)

Tests to see whether the browser can play a specific type of video, for example 'video/webm;codecs="vp8, vorbis"'

The browser will return:

probably - if it’s most likely the video file can be played maybe
if the video might be playable [empty string]
if the video file is not playable

<video id="myvid" controls>
    <source src="./foo.mp4" />
    <p>Use new browser.</p>
</video>
<script>
    myvid = document.getElementById("myvid")
    if (myvid.canPlayType('video/webm;codecs="vp8, vorbis"') || myvid.canPlayType('... others depending on what formats you have available ...') {
        // all okay
    } else {
        // alert user to the problem
    }
</script>