HTML <video> tag represents a multimedia objects like video clip or movie clip.
The video tag is generally used to embed a music video on your web page for your visitors to listen to and watch.
When any web browsers doesn’t support the video tag, we need to specify “alternate or fallback content” that will indicate visitors that this video is not supported by your web browser try with another one.
Also see HTML <audio> tag to specify audio objects like mp3 on your web page.
Sample Code
<video src="video_sample.ogv" width="100%" height="250" controls>
<p>Sorry, your web browser doesn't support this tag or video.</p>
</video>
Sample Result
Tag Specific Attributes Support
The HTML <video> tag accepts attributes that specify how the video should be played. See below for a list of common supported tag specific attributes.
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Represents that the video will start playing on page load as soon as it is ready to play |
| controls | controls | Represents the video controls to displayed for the video player or not |
| height | pixel % |
Represents the height of the video player |
| width | pixel % |
Represents the width of the video player |
| loop | loop | Represents the loop for the that means video will re-play when it is reach at the end or completed |
| muted | muted | Represents the video is muted(sound off) |
| preload | none auto metadata |
Represents the preloaded video that meand loaded on page load |
| src | url | Represents the source location to embed the video |
Standard Attributes Support
The HTML <video> tag supports HTML Standard Attributes. See below for a list of common supported standard attributes.
| Attribute | Value | Description |
|---|---|---|
| class | user_defined | Represents a style for an element which is used in CSS style sheet |
| id | user_defined | Represents unique id for an element |
| style | css_properties | Represents an inline style for an element for e.g style=”color:red;text-decoration:underline;” |
| title | user_defined | Represents a tooltip information for an elements like img, a, abbr etc |
Event Attributes Support
The “script” is invoked when a certain “event” occurs. Each event handler content attribute deals with different events. HTML <video> tag supports HTML Event Attributes. See below for a list of common supported event attributes.
| Attribute | Value | Description |
|---|---|---|
| onclick | script | Event Fires immediately when mouse click on the specified element |
| ondblclick | script | Event Fires immediately when mouse double-click on the specified element |
| onkeydown | script | Event Fires immediately when user is pressing a down key from keyboard |
| onkeypress | script | Event Fires immediately when user presses a key from keyboard |
| onkeyup | script | Event Fires immediately when user releases a key from keyboard |
| onmousedown | script | Event Fires immediately when mouse pointer gets down from an element |
| onmousemove | script | Event Fires immediately when mouse pointer moves over an element |
| onmouseout | script | Event Fires immediately when mouse pointer gets out from an element |
| onmouseover | script | Event Fires immediately when mouse pointer moves over an element |
| onmouseup | script | Event Fires immediately when a mouse pointer is released over an element |
