Availability of Video-Tag - html

Question

I used HTML's own video tag instead of the "old" flash way to display a video on my own site:
<video src="video.mp4" preload="auto" autobuffer controls autoplay>
<iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>
I tested it on my own computer with 3 different browsers: Chrome (30), Firefox (24) and IE (10). It worked as expected.
Then I asked another user to test my site on different machines with different browsers. Unfortunately it didn't work on all machines, even though he used the same browser versions like me.
Firefox displayed him the following error: Video format or MIME type is not supported.
How is it possible, that the same browsers behave different on
different machines?
Why didn't Firefox display the alternative
content, in my case the vimeo video in the iframe?
Is there a way to ensure and check that my videos will be displayed
in all browsers on all machines?
Thank you!

Answer 1

Firefox has no native MP4/H.264 support, it uses the codec available on the system for this, and in case there is no proper H.264 codec, the video won't play, and you'll receive that error message.
See also http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats
The fallback content is only used in case the browser doesn't understand the video element at all, unsupported codecs won't cause the fallback to be used.
In order to make sure the video plays in all major browsers, irrespective of the OS, you have to supply the video in different formats using the source element.
Currently using WEBM VP8/9, OGG Theora and MP4 H.264 should do it.
<video preload="auto" autobuffer controls autoplay>
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>
You could also try utilizing the error event on the video element or on the last source element, and implement a JavaScript based fallback where you replace the video element with its content.
Example from the W3 specs:
<script>
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
</script>
<video controls autoplay>
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
onerror="fallback(parentNode)">
...
</video>
http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#source-default-media