How to make HTML5 Video to work on all browsers
Posted by: absolute
While building a new website we recently stumbled upon an issue that some web browsers have handling that HTML5 video - specifically Internet Explorer and Firefox.
Although we had an alternative solution available we knew it was possible to get the video working in for these browsers. It turned out that the problem was caused by the server not recognising the MIME-type. It was incorrectly serving it as text/plain when it should have been video/ogg.
What are the symptoms?
If you experience something similar check the console on your browser to see if its the same issue. If you see error messages stating that your videos are being served as text/plain and are not supported by the browser then its very likely to be this issue.
Luckily there is a quick solution. If you're using an apache web server simply add the following to an .htaccess file in the directory where you're storing the videos:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .web
This means that the server can detect the correct file types allowing for the video to be severed correctly.
You can find out more about HTML5 video and MIME-types here