It's been a while since I have updated my web skills, the last time I worked on a major web project HTML5 hadn't really got off the ground enough to start using it. Several years have past now and most major browsers now support HTML5 in some shape or form, so now seems a good time to learn what extra features have been added. Tonight I thought I'd take a look at the new HTML5 Video tag.
A few years ago if you wanted a website with any kind of video content you'd be looking at using a plug-in such as Adobe Flash or Apple's Quicktime. And I don't think these plug-ins will disappear any time soon! However, there is definitely a growing number of websites looking to progress onto a web-standards HTML5 Video tag.
First I needed a video. I have a Microsoft Lifecam which comes with a program for recording from it. However it produces a WMV file and I'm not sure which video/audio codec was used during the recording. After a little googling I found that there's not a single format that fits all browsers, but the HTML5 Video tag supports specifying multiple files for the video source and the browser will use the file that it supports. I decided to try to convert my source video into a .mp4 file with H.264 video encoding and a .webm with WebM video encoding.
Two tools helped me accomplish this:
Handbrake was straight forward enough, just choose the source WMV file, checked Web Optimized and pressed Start. Volia! A .mp4 was created that I could upload to my web host.
Next I started Miro Video Converter, dragged my .mp4 file onto the window and chose WebM from the drop-down. However when I clicked "convert" the program did not respond and said it had 0% progress. I cancelled this first attempt, went into Handbrake and checked 'constant bitrate'. This fixed the problem and the next conversion attempt was successful, a .webm file was created!
I uploaded the two files to my web host along with a very simple HTML file with the following mark-up:
<!DOCTYPE html>
<body>
<video width="320" height="240" controls="controls">
<source src="Wave.mp4" type="video/mp4" />
<source src="Wave.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
You can see the results here.
I was very impressed with how simple it was to get video content onto a webpage with the new HTML5 standard.