How come HTML5 video plays inconsistently in Firefox 11?

Question

I have the following HTML5 video code on my homepage and it acts strange in Firefox 11.

<video width="900" height="508" autoplay="autoplay" controls="controls">
    <source type="video/webm" src="http://www.mysite.com/MovieClip.webm"></source>
    <source type="video/mp4" src="http://www.mysite.com/MovieClip.mp4"></source>
</video>

When the homepage on my site loads, I see in the place of the video the following error message: "No video with supported format and MIME type found."

However, when I open up the media path "http://www.mysite.com/MovieClip.webm" directly, in a new tab, it loads the media just fine (using the internal Firefox HTML5 video player)!

Then, right afterwards when I go back to my homepage and refresh the page, it now loads the video just fine! Any ideas on why this is happening and how to fix?

Thanks in advance!

Answer 1

Be certain that your web server is configured to deliver WebM video as MIME type "video/webm". You can quickly and manually check if this is the case by telnetting to your web server and issuing a HEAD request:

telnet www.mysite.com 80

[after connection...]

HEAD /MovieClip.webm HTTP/1.1
Host: www.mysite.com

And finish the request with 2 carriage returns. The HTTP response header should contain a "Content-Type:" line. If it doesn't say "video/webm", Firefox won't accept your WebM file.

Answer 2

Regardng to Multimedia Mikes answer. If your server delivers the wrong mime type to the videos just put a htaccess file with following content into your videos directory:

AddType video/mp4 mp4
AddType video/ogg ogg
AddType video/webm webm

This worked out well.

If, please rate his answer ;)

Greetings func0der