At the first of December I held a really small knowledge session for my colleagues about HTML5 and its possibilities with some video formats. The evening before this session I was trying to fix de demo and tried to make it compatible with a .AVI, .WMV or .OGV file, but I noticed some strange 'thingies'.
What did I used: Visual Studio 2010, .NET4.0, jQuery and a small piece of video of my own gameplay in Call Of Duty - Modern Warfare 2. Not that hard where my thoughts. First I added some HTLM5 code for my page so I could embed the video format:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ouch...</title>
<meta charset="UTF-8" />
</head>
<body>
<video controls src="Resources/03-Pazcalgetsheadshot.ogv" />
</body>
</html>
As I’m creating a ASP.NET website, I also added the mimeType at the web.config, to make sure the correct codec is used by the matching type of video file.
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ogv" mimeType="video/ogg"/>
</staticContent>
</system.webServer>
</configuration>
What I noticed was that even though I used an .WMV, .AVI or .OGV file format, none of the videos were working when I hit the F5 button. All I saw was just a plain, white html page wit a dark grey rectangle and a little more light grey cross. First I thought I did something wrong with the codec settings, but after I spend some minutes on Google I knew I didn’t do anything wrong.
So for the test, I created just a simple plain HTML page. Copy and paste the code in the page and, after saving, I ran the file in the browser, just by opening the file directly from the Windows Explorer. Result: it works! Even without the codec. The reason why it didn’t work with the debugger is because Visual Studio is creating an own virtual IIS environment for your project. This way it doesn’t understand the mimeType and somewhere under water, the codec gets lost. When you configure your project directly to an instance in your IIS, everything should work normal.
FireFox 3.5 or higher, Safari 3.2 or higher, Opera 9 or higher and IE 9 don’t need any codec definition when you are using the .OGV filetype. Also audio (the .OGG file) don’t need any codec implementations and can be directly used by using the <audio> tag.
Converting videos where a really pain in the *** as you normally have to use some kind of video program to convert it the right bitrate, format, size, audio support and all other kinds of things. For this example I’ve used a much better, easier and even free solution, thanks to Firefox! It’s call Firefogg.org.
With FireFogg.org, you can install a special video/audio convert plugin, to make it possible to convert your video file for webusage.
It’s really easy to use, it’s fast and it’s free! I really advise you to give it a try when you need an converter for video format files.
Demo, download the demofolder here: HTMLVideo.zip (15.44 mb)