HTML 5 <video> Tag
The HTML <video> tag is used to specify video on an HTML document.
For example, you could embed a music file on your web page for your visitors to listen to and watch.
The <video> tag was introduced in HTML 5.
Any content between the opening and closing <video> tags is fallback content. This content is displayed only by browsers that don't support the <video> tag.
Example
This example demonstrates usage of the <video> tag.
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
| Attribute | Description |
|---|---|
| src | Specifies the location of the video file. Its value must be the URI of a video file. |
| poster | Specifies an image to use while the video is unavailable (i.e. it hasn't loaded yet). This is typically an image of one of the first frames of the video. If supplied, the value must be a valid URL of an image. |
| autoplay | Specifies whether or not to start playing the video as soon as it can do so without stopping.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
| loop | Specifies whether to keep re-playing the video once it has finished.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
| controls | Specifies whether or not to display video controls (such as a play/pause button etc).
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
| width | Specifies the width, in pixels, to display the video.
Possible values: [Non-negative integer] (for example, 300) |
| height | Specifies the height, in pixels, to display the video.
Possible values: [Non-negative integer] (for example, 150) |
Global Attributes
The following attributes are standard across all HTML 5 tags.
| class | id | style |
| contenteditable | irrelevant | tabindex |
| contextmenu | lang | template |
| dir | ref | title |
| draggable | registrationmark |
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
Here are the standard HTML 5 event handler content attributes.
| onabort | ondragover | onmousemove |
| onbeforeunload | ondragstart | onmouseout |
| onblur | ondrop | onmouseover |
| onchange | onerror | onmouseup |
| onclick | onfocus | onmousewheel |
| oncontextmenu | onkeydown | onresize |
| ondblclick | onkeypress | onscroll |
| ondrag | onkeyup | onselect |
| ondragend | onload | onstorage |
| ondragenter | onmessage | onsubmit |
| ondragleave | onmousedown | onunload |
For a full explanation of these attributes, see HTML 5 event handler content attributes.
Also see the HTML 4.01 tags
