Flash player is currently widely used to embed video across websites, I wanted to look at a different method of serving video to the masses.

HTML5 Video!

A new element introduced within the HTML5 spec for the purpose of playing videos or movies. This will work across the web within new browsers and Apple’s mobile devices.

I first needed to require a bit of video for my test purpose, grabbing my iPhone I quickly recorded away and transferred the video to edit.

The file I was holding was a standard apple format .mov... this wasn’t really helpful for web streaming unless I wanted users to download quicktime.

Firstly I needed to convert my .mov to a few different types to work across across all browsers. For Safari and Apple devices I needed an mp4/m4v file, using HandBrake for mac I selected my source file “filename.mov” then selecting the iPhone 4 preset I modified the following for better web results:

http://handbrake.fr/

Format: MP4 file
Web optimized: ticked
Framerate: Same as source
Average bitrate: 600
Tick 2-pass encoding and Turbo first pass
Keep aspect ratio (under Picture Settings)

Once these are set select Start and you’ll soon have your .m4v file.

For the other two formats to support webkit and older browsers I required .webm and .ogv.

http://www.mirovideoconverter.com/

Using Miro Video Converter I was quickly able to drag drop and convert to these formats.
I used the following under the drop down menu:
Theora (.ogv)
WebM (.webm)

I now had my three video files to serve up to the web, the next part is writing the HTML5 to display my videos.

Within the video controls block I’ve organised my videos so that the .m4v file is first. This is so that it is detected on Apple’s devices, Apple’s mobile browsers only see the first video source.

I then saved the file and started the testing process, firing up every browser on my mac to behold a glorious video of Simon swearing at me...

Firefox 4


Apple iPad 2

Demo to come soon...