Question

I’m not having any problems playing this video in Chrome, Safari or Opera. When I try to play it in Firefox, I get a grey box with no video. Here is my code:

            <video width="640" height="360" autobuffer controls preload="auto" >
              <source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              <source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
              <source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>
                Your browser does not support the video tag.
          </video>

I have also created an .htaccess file (see below) and put it in the same folder as my video files:

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

The link to my file is:

http://www.synergese.co.uk/testMathsOnline/day3/videos/day3FracWelVideo.html

I would be very grateful for any help.

Many thanks,
Philippa

Answer 1

The MIME-type from your server for the fracWelDay3.ogv video is incorrectly being served as `text/plain’.

$ curl -I http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.ogv

Notice that Content-Type is text/plain instead of video/ogg:

HTTP/1.1 200 OK
Date: Thu, 26 May 2011 21:55:25 GMT
Server: LiteSpeed
Accept-Ranges: bytes
Connection: close
ETag: "fa8cc4-4dde175c-0"
Last-Modified: Thu, 26 May 2011 09:03:24 GMT
Content-Type: text/plain
Content-Length: 16420036

The HTML5 video plays for me in Safari, Chrome and IE 9 but not Firefox or IE 7-8. If you fix the MIME-type issue, it will play in Firefox.

If you’re using the Apache web server or some derivative of Apache, you can use an AddType directive in your site-wide httpd.conf or in an .htaccess file in the directory where you store your video files. (If you use some other web server, consult your server’s documentation on how to set the Content-Type HTTP header for specific file types.)

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

The first line is for videos in an Ogg container. The second line is for videos in an MPEG-4 container. The third is for WebM. Set it once and forget it. If you forget to set it, your videos will fail to play in some browsers, even though you included the MIME type in the type attribute in your HTML markup.