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.
<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
|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
|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.|