How can I add videos with HTML5 in WordPress so they can be played on the iPad, the iPhone and the iPod Touch too?

Chapter 1: Introduction
Chapter 2: The best solution
Chapter 3: How to convert the videos to the needed formats (Mac)

Chapter 1: Introduction

Some of you may ask: What are all these people talking about?

HTML5 is the latest revision of the markup language which is used to create the World Wide Web. It is released by W3C, an association which aims to standardize the web-language and make it easier for developers and webmasters to create web contents. One of the biggest changes with HTML5 opposed to HTML4 is the introduction of the <video> tag.

As you know to embed an image into your website with HTML code all you have to do is type
<img src="URLtoTheImage" width="350px" height="200px">
and this code works for any type of image file: .jpg, .tiff, .png, .gif, ...

Whereas with videos up until now as you see in the Movies and Flash content chapter there’s a different code to be used for each video format. Quite complicated. The <video> tag wants to make it easier so you would have one code for all of them. W3C originally even wanted to go a step further and have only one video format for the web so all videos would have been .mp4, .ogg or something. Unfortunately the biggest tech-companies (Apple, Google, Microsoft, Mozilla with their Firefox and Adobe with their Flash format) couldn’t agree on what format would be best to adopt. Which currently causes troubles.

Apple’s Safari browser (hence all Apple devices: computers, iPad, iPhone and iPod Touch) supports the video tag only in combination with H.264 .mp4 or .m4v (an Apple developed format of .mp4). It doesn’t support the video tag in combination with .ogg format.

Mozilla’s Firefox browser supports the video tag only in combination with .ogg format. It doesn’t support the video tag in combination with .mp4 (and .m4v).

Microsoft’s InternetExplorer currently does not support HTML5 at all hence it also does not support the video tag at all. Only IE9, said to appear next year (2011), will implement support for HTML5.

Google’s Chrome browser is currently said to be quite buggy for what concerns HTML5 however it should support both .mp4 and .ogg

Is the video tag a total failure? No. I think it’s just too early. With time going by there will certainly be a universally valid solution. Either with only one video format or all browsers supporting both .mp4 and .ogg format. I think the video tag has been over-pushed by the public battle between Apple and Adobe even if it’s not yet ready or fully supported. For up to date information on which browser supports which format have a look at the table on this page.

Chapter 2: The best solution

To me the best solution to embed video with HTML5 into your website is using videojs.com

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="URLtoPreviewImage.png" data-setup="{}">
<source src="URLtoTheMovie.mp4" type='video/mp4'>
<source src="URLtoTheMovie.webm" type='video/webm'>
</video>

If you want the video to autoplay type autoplay near controls. So it will read controls autoplay.
Change width and height to fit your video
Where it says URLtoPreviewImage.png enter the URL to the preview image of the video
Where it says URLtoTheMovie.mp4 enter the URL to the .mp4 movie you uploaded
Where it says URLtoTheMovie.webm enter the URL to the .webm movie you uploaded

To know how to upload a movie or an image and find out its URL read the Basic web knowledge base FAQ.

Chapter 3: How to convert the videos to the needed formats (Mac)

I think the best and easiest way to convert your movie to .mp4 and .webm is using a freeware application named Miro Video Converter.

1) Go to http://www.mirovideoconverter.com/ to download the application
2) Drag your video in the appropriate box and choose to covert it to MP4, hit Convert! Repeat the procedure choosing WebM (vp8).
3) That's it.