How to Embed Videos with HTML 5
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: