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 files with Theora video codec and Vorbis audio codec
MPEG 4 files with H.264 video codec and AAC audio codec
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 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:
<video src=”video name” controls=”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 name” width=”300” height=”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.
<video src=”video name” autoplay=”autoplay”><video>
The video will play automatically as soon as the page is completely loaded.
<video src=”video name” loop=”loop”><video>
The video will start running automatically for the start as soon as it finished
<video src=”video name” preload=”preload”><video>
Video is loaded with the page load, the attribute will be ignored if autoplay attribute is present.
<video src=”video name” poster=”url”><video>
This attribute mention the path of image representing the video.