<video> tag in HTML5
The <video> tag is used to embed video into web page, it has several video sources OR The <video> tag used to define video, such as a TV shows clip or other video streams.
Important Description
- The <video> tag is new in HTML5.
- HTML5 defines DOM methods, properties, and events for the video element.
- Attributes - load, play, pause videos, as well as setting duration and volume.
- There are also DOM events that can notify you when a video begins to play, is paused, etc.
- Open and close tag required of <video>.
Example of <video> tag
Result Look Like
<video> Tag Browser Support
| Element |
Chrome |
Edge |
Firefox |
Safari |
Opera |
| <video> |
4.0 |
9.0 |
3.5 |
4.0 |
10.5 |
<video> tag Support with formats
Browser’s modern version supports <video> but it may possible some of them can’t. There are three supported video formats: MP4, WebM, and Ogg.
| Browser |
MP4 (video/mp4) |
WebM (video/webm) |
Ogg (video/ogg) |
| Edge |
Yes |
No |
No |
| Chrome |
Yes |
Yes |
Yes |
| Firefox |
Yes |
Yes |
Yes |
| Safari |
Yes |
No |
No |
| Opera |
Yes (from opera 25) |
Yes |
Yes |
<video> tag media types
There are three media type use in <video>, you have to pass one of them as type attribute value.
Global Attributes
Event Attributes
Attributes
| Attribute |
Value |
Description |
| height |
Pixels |
Sets the height of the video player |
| width |
Pixels |
Sets the width of the video player |
| src |
URL |
Specifies the URL of the video file |
| autoplay |
autoplay |
Specifies that the video will start playing as soon as it is ready |
| controls |
controls |
Specifies that video controls should be displayed |
| loop |
loop |
The video will start over again, every time it is finished |
| muted |
loop |
An audio output of the video should be muted |
| poster |
loop |
An image to be shown while the video is downloading |
| preload |
loop |
The video should be loaded when the page loads |