HTML5 video (mp4 and ogv) problems in Safari and Firefox - but Chrome is all good

Question

I have the following code:

<video width="640" height="360" controls id="video-player" poster="/movies/poster.png">
 <source src="/movies/640x360.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="/movies/640x360.ogv" type='video/ogg; codecs="theora, vorbis"'> 
</video>

• I'm using Rails (Mongrel in development and Mongrel+Apache in production).
• Chrome (Mac and Win) can play either file (tested by one then the other source tags) whether locally or from my production servers.
• Safari (Mac and Win) can play the mp4 file fine locally but not from production.
• Firefox 3.6 won't play the video in either OS. I just get a grey cross in the middle of the video player area.
• I've made sure that both Mongrel and Apache in each case have the right MIME types set.
• From Chrome's results I know there is nothing inherently wrong with my video files or the way the files are being asked for or delivered.

For Firefox I looked at https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox where it refers to an 'error' event and an 'error' attribute. It seems the 'error' event is thrown pretty well straightaway and at that time there is no error attribute. Does anyone know how to diagnose the problem?

Bivouac

Try opening the video file itself in firefox and see if it plays. – Boutin

That might be a clue. Whether I try this locally or from the production server I get prompted to download the file. Sounds perhaps like a MIME problem..? But I've checked and checked that these are set for .ogv. Grrr. How would I check the MIME settings are being heeded by Apache..? Any clues? – Bivouac

Just tried this in Chrome (where the video plays fine) and this also downloads the file if I put the URL in the location bar... – Bivouac

This is true whether I try locally or on the server... – Bivouac

To get MIME types, do curl <url> and stop it after a few seconds. It will have printed out the headers sent. This always works, whereas Firebug etc do not print MIMEs for downloaded files. – Passport

So, given the answer, is it a fair conclusion that Firefox and Safari put more weight on the MIME type sent in the header, whereas Chrome gives precedence to the context in which the request is made? – Boutin

To get the MIME type using curl, I had to add the verbose switch. So, curl -v [url] > tmp.txt – Demmer

Answer 1

The HTTP Content-Type for .ogg should be application/ogg (video/ogg for .ogv) and for .mp4 it should be video/mp4. You can check using the Web Sniffer.

Giorgia

Aha. I checked that using Web Sniffer and I'm getting the Content-type as application/octet-stream. So for Firefox anyway it's looking like a MIME type problem. Thank you - I shall see if I can fix it from here. There's still the problem with Safari, though... :( – Bivouac

I had an Apache misconfiguration and the Firefox problem was indeed due to the wrong MIME types being sent. Thank you! – Bivouac

I have now also found my Safari problem - another misconfiguration. All problems resolved! Thanks, guys. – Bivouac

@Giorgia So what exactly is your resulting video tag to remedy the issue with firefox and safari? Why post that you fixed the problem if you don't bother to describe how? – Donella

The solution, if you are using Apache is to use an configure Apache to send the correct Mime types, or simply use an .htaccess file with the following line: AddType video/ogg .ogv – Verified

Answer 2

Add these lines in your .htaccess file and it will work for all browsers. Works for me.

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

If you dun have .htaccess file in your site then create new one :) its obvious i guess.

Schroth

sadly it didn't work for me.I was trying for m4v videos.Can you please suggest for them as like for .ogv .mp4 .webm – Simonsimona

@NJInamdar use AddType video/mp4 .mp4 .m4v for the second line – Bravura

@AakilFernandes:Thanks for the reply.but sadly it didn't work. :( – Simonsimona

Answer 3

Incidentally, .ogv files are video, so "video/ogg", .ogg files are Vorbis audio, so "audio/ogg" and .oga files are general Ogg audio, so also "audio/ogg". Checked in Firefox and work. "application/ogg" is deprecated for all audio or video uses. See http://www.rfc-editor.org/rfc/rfc5334.txt

Rew

Answer 4

I see in the documentation page an example like this:

<source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">

Maybe you should enclose the codec information with " entities instead of actual quotes and the type attribute with quotes instead of apostrophes.

You can also try removing the codec info altogether.

Konikow

Thanks, bogdanvursu. Much appreciated. I'm afraid neither suggestion helped, though. :( – Bivouac

If the outer quotes are double quotes, you need to escape the inner quotes as &quot;. If the outer quotes are single quotes, you don't need to escape inner double quotes. – Giorgia

Answer 5

Just remove the inner quotes - they confuse Firefox. You can just use "video/ogg; codecs=theora,vorbis".

Also, that markup works in my Minefiled 3.7a5pre, so if your ogv file doesn't play, it may be a bogus file. How did you create it? You might want to register a bug with Firefox.

Rew

the inner quotes were necessary – Diplocardiac

Answer 6

Just need to change one letter:), rename 640x360.ogv to 640x360.ogg, it will work for all the 3 browers.

Selfevident

NOT TRUE ogg is not supported by IE – Deguzman