How to show video on your website using HTML5 video tag
Until now, there has never been a standard for showing video on a web page.
Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.
HTML5 specifies a standard way to include video, with the video element.
Currently, there are 3 supported video formats for the video element Ogg , MPEG 4, WebM.
* Ogg = Ogg files with Theora video codec and Vorbis audio codec
* MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
* WebM = WebM files with VP8 video codec and Vorbis audio codec
How It Works :
To show a video in HTML5, this is all you need:
The control attribute is for adding play, pause, and volume controls. It is also always a good idea to include the width and height attributes. Insert content between the and tags for browsers that do not support the video element. The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format.
Example :
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Internet Explorer 8 does not support the video element. In IE 9, there will be support for video element using MPEG4.
All Attributes for HTML5 Video Tag
| Attribute | Value | Description |
|---|---|---|
| audio | muted | Defining the default state of the the audio. Currently, only “muted” is allowed |
| autoplay | autoplay | If present, then the video will start playing as soon as it is ready |
| controls | controls | If present, controls will be displayed, such as a play button |
| height | pixels | Sets the height of the video player |
| loop | loop | If present, the video will start over again, every time it is finished |
| poster | url | Specifies the URL of an image representing the video |
| preload | preload | If present, the video will be loaded at page load, and ready to run. Ignored if “autoplay” is present |
| src | url | The URL of the video to play |
| width | pixels | Sets the width of the video player |
For more information on HTML5, please visit www.w3schools.com/html5
Latest posts by Soumyajit Dutta
- Wordpress Plug-in For Showing Custom Menu Within A Post Or Page - September 19th, 2011
- Add Custom Input Fields In Custom Post Type Using Custom Field Template Plugin - August 10th, 2011
- WordPress Tutorial - June 14th, 2011
- Create Your Own Website For Free With Byethost.Com - April 12th, 2011
- Ideal Process to Organize Your Project - March 14th, 2011
