HTML5 Video

HTML5 provides video element to embed video in web page. Prior to HTML5, we are using third party plug-ins, like - flash, Microsoft Silverlight, etc to play video on the browser. The problem with these plug-ins are that, not all browsers or devices support it. HTML5 provides a standard way to include video with several attributes which improve its default behavior.

It is very easy to embed video in an HTML5 document.

Example

<video width="400" height="350" poster="video/rabbit.jpg" controls>
<source src="video/animation.mp4" type="video/mp4" />
<source src="video/animation.webm" type="video/webm" />
<source src="video/animation.ogg" type="video/ogg" />	
Your browser does not support the embedded HTML5 video element.
</video>





Attributes of VIDEO element

Attribute Name Description
width and height It specifies the width and height of the video element.
poster A poster frame is shown on a video frame until the user clicks the play button.
controls It specifies video control units like Play, Pause, Rewind, Volume controls.
source It contains different types of video formats to support in different browsers and devices.
type It specifies the MIME type of the video, like- mp4, web, ogg.
loop It repeats the video play over and over again without stopping.
autoplay The video will automatically play once the web page has loaded.

HTML5 video media types

Format Type
MP4 MP4 file uses MPEG-4 compression. It is used for sharing high quality video files on the Internet.
Webm It is an open video compression format owned by google. It uses the VP8 codec.
Ogg It is a free video compression format. It uses the Theora format for HTML5 video.







Read more articles