How to Embed Videos with HTML 5

Tue, Jul 10, 2012 2-minute read

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:

<video width="529" height="300" controls="controls">
  <source src="VIDEO0006.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

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:

Browser MP4 WebM Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES

MP4 = MPEG 4 files with H264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec Ogg = Ogg files with Theora video codec and Vorbis audio codec

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/