Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 798
qryss Avatar asked Apr 15 '10 07:04

qryss


People also ask

Does HTML 5 support MP4?

The HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg.


2 Answers

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.

like image 61
hsivonen Avatar answered Sep 24 '22 19:09

hsivonen


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.

like image 31
Salman Aslam Avatar answered Sep 24 '22 19:09

Salman Aslam