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