I’ve just created my very first video for the web. You can see it in this post.
Adding a video to a web page…if that’s not the time to try out the new HTML5 video tag, then when is…eh?
So I took a look at Mark Pilgrims book (that I have already highly recomended once), more specifically the chapter about video.
It looked easy enough.
So I downloaded miro and had my webm and H.264 files ready in no time.
I then copied and pasted the cumbersome type attribute (come on now, who can remember this just in their head: codecs=”avc1.42E01E, mp4a.40.2″).
I saved my wonder and I loaded the page in Firefox 4…didn’t work! I then tried Chrome…it worked!
After a good hour of trying a, b and c followed by A, B and C followed by swearing, followed by changing random bits of the HTML, followed by more swearing followed by my wife leaving the living room followed by changing random bits of the HTML again I re-re-re-reread Marks chapter, and this time I made it all the way throught to the section called “MIME Types Rear Their Ugly Head”.
Sure enough, a quick look at the net pane in Firebug showed me that the video file was sent with content-type text/plain.
So I copied these three lines
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
Into my .htaccess file, reloaded in Firefox….and it worked!! Another look at the net pane of Firebug showed me that content-type for the video file was now video/webm.
So, to quote Mark Pilgrim:
“VIDEO FILES MUST BE SERVED WITH THE PROPER MIME TYPE!”
Hopefully anybody will come by this post when they’re wondering why their video tag isn’t working in Firefox 4 even though it should.