How to add Video in HTML 5

There is no tag available in HTML previous version to add video in the webpage. The majority of video available on webpage using the flash plug-in which is also not supported by every browser. HTML introduce a new element <video> to show video on webpage without need of any plug-in.

Files format supported by <Video> in HTML 5

Following are the formats supported by the HTML 5 video element.

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

In HTML 5 its very easy to show the video on web pages, the only thing you need to do is:

<video src=”video name> </video>

Multiple sources

Multiple sources can be define in <Video> element. The browser will start running the first recognized format if no format is supported then the message will be displayed on browser.

<video width="500" height="500">
  <source src="streaming.ogg" type="video/ogg" />
  <source src="streaming.mp4" type="video/mp4" />
  <source src="streaming.webm" type="video/webm" />

This browser not support video tag 

</video>

Attributes of <Video> in HTML 5

There are number of attributes which can be used in video element such as:

Controls

<video src=”video namecontrols=”controls> </video>

To add play, pause and volume controls in the video through which you have control over the video.

Width and Height

<video src=”video namewidth=”300height=”400”></video>

It is always the better option to use the width and height attribnuts with images and video to adjust the size of video on Web page. In the above example the width of video is 300 pixels and height is 400 pixels.

Autoplay

<video src=”video nameautoplay=”autoplay><video>

The video will play automatically as soon as the page is completely loaded.

Loop

<video src=”video nameloop=”loop><video>

The video will start running automatically for the start as soon as it finished

Preload

<video src=”video namepreload=”preload><video>

Video is loaded with the page load, the attribute will be ignored if autoplay attribute is present.

Poster

<video src=”video nameposter=”url><video>

This attribute mention the path of image representing the video.

Be Sociable, Share!

One response to How to add Video in HTML 5

Leave a Reply