I’ve just embedded my first video (MP4) with HTML 5. I think this is much better than depending on the Quicktime player or converting it to Flash and it’s very easy.

 

Here is an example code for embedding a MP4 video I’ve recorded with my Android phone:

The control attribute adds video controls, like play, pause, and volume. You can have multiple sources of the same file. The browser will use the first recognized format.

 

You may also want to set the codec that is used in your video. You can to this with the codecs=”” tag. A good way to find out what codec and aspect ratio your video uses is a free software called MediaInfo.

 

At the moment, there are 3 supported video formats:

<th align="left" width="16%">
  MP4
</th>

<th align="left" width="16%">
  WebM
</th>

<th align="left" width="16%">
  Ogg
</th>
<td>
  YES
</td>

<td>
  NO
</td>

<td>
  NO
</td>
<td>
  NO
</td>

<td>
  YES
</td>

<td>
  YES
</td>
<td>
  YES
</td>

<td>
  YES
</td>

<td>
  YES
</td>
<td>
  YES
</td>

<td>
  NO
</td>

<td>
  NO
</td>
<td>
  NO
</td>

<td>
  YES
</td>

<td>
  YES
</td>

 As you can see unfortunately not all the major browsers support the same formats. It’s best to combine MP4 and Webm or MP4 and Ogg.

 

If you want more detailed information, have a look at these sites:

http://www.w3schools.com/html5/html5_video.asp

http://www.webmonkey.com/2010/05/embed-videos-in-your-web-pages-using-html5

 

You may also find this aspect ratio calculator to be useful if you want to resize your video:

http://andrew.hedges.name/experiments/aspect_ratio/