How come HTML5 video plays inconsistently in Firefox 11?

html firefox webm
DecafJava picture DecafJava · Mar 28, 2012 · Viewed 8.8k times · Source

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

Multimedia Mike picture Multimedia Mike · Mar 30, 2012

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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Using <meta> tags to turn off caching in all browsers?

I read that when you don't have access to the web server's headers you can turn off the cache using: <meta http-equiv="Cache-Control" content="no-store" /> But I also read that this doesn't work in some versions of IE. …

Read More
How can I tell if a DOM element is visible in the current viewport?

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)? (The question refers to Firefox.)

Read More