HTML <video> Element
The HTML 5 <video>
tag represents video embedded into an HTML document.
The basic tag is written like this <video src=" controls>
</video>
with the URL of the video file inserted between the double quotes of the src
attribute. In this example, the (optional) controls
attribute is used to tell the browser to display controls that the user can use to control the video (eg, play, pause, volume etc). Other attributes include preload
, autoplay
, loop
and more. See below for a full list of supported attributes.
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.
Note: You need to ensure your web server is configured for the correct MIME Type when using video files. See the bottom of this article for instructions on how to do this.
The <video>
tag was introduced in HTML5.
Example
The following example shows how this element works.
Code
Result
Attributes
The <video>
element accepts the following attributes.
Local Attributes
The following attributes are defined in the <video>
element's specification.
Attribute | Description | ||||||
---|---|---|---|---|---|---|---|
src | Specifies the location of the video file. Its value must be the URL of a video file. | ||||||
crossorigin | This attribute is a CORS settings attribute. CORS stands for Cross-Origin Resource Sharing. The purpose of the crossorigin attribute is to allow you to configure the CORS requests for the element's fetched data. The values for the crossorigin attribute are enumerated.
Possible values:
If this attribute is not specified, CORS is not used at all. An invalid keyword and an empty string will be handled as the |
||||||
poster | Specifies an image to use while the video is unavailable (for example, if 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. | ||||||
preload | Specifies whether the video should be preloaded or not, and if so, how it should be preloaded. Preloading allows the video to be loaded before it needs to be used (eg, before the user clicks the "play" button). The preload attribute allows the author to provide a hint to the browser/user agent about what the author thinks will lead to the best user experience. This attribute may be ignored in some instances. For example, if the user has disabled preloading or if there are network connectivity issues.
Possible values:
Note that the |
||||||
autoplay | Instructs the video to start playing as soon as it can do so without stopping. This results in the video starting automatically when the user loads the page.
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:
|
||||||
mediagroup | For synchronizing playback of videos (or media elements). Allows you to specify media elements to link together. The value is a string of text, for example: mediagroup=movie . Videos/media elements with the same value are automatically linked by the user agent/browser.
An example of where the |
||||||
loop | Specifies whether to keep re-playing the video once it has finished (i.e. it will keep playing again and again until it is stopped).
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:
|
||||||
muted | Controls the default state of the video's audio output. If present, this attribute results in the audio output being muted (i.e. there is no sound) upon loading. This attribute will override the users' preferences. The user can then choose to turn on the sound if he/she so wishes. This helps users from being annoyed by loud sounds coming from the video as soon as the page/video starts loading. Users often close their browser when this happens. The mute attribute aims to overcome this issue by having the video start off silently instead of loudly.
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 button, pause button, volume control 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, 400) |
||||||
height | Specifies the height, in pixels, to display the video.
Possible values: [Non-negative integer] (for example, 200) |
Global Attributes
The <video>
element accepts the following global attributes. These attributes are standard across all HTML 5 elements.
Attribute | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
accesskey | Specifies a shortcut key that can be used to access this <video> element.
Possible values. [Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.] |
||||||||||||
class | This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use. | ||||||||||||
contenteditable | This attribute specifies whether the user can edit the content or not.
Possible values:
|
||||||||||||
contextmenu | The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM. |
||||||||||||
dir | Specifies the direction of the text.
Possible values:
|
||||||||||||
draggable | Specifies whether the user is allowed to drag this <video> element or not.
Possible values:
|
||||||||||||
dropzone | The dropzone attribute specifies what should happen when the user "drops" an element (i.e. after dragging it) onto this <video> element.
Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. Possible values:
Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied. |
||||||||||||
hidden | Indicates that this particular This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
||||||||||||
id | The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
|
||||||||||||
itemid | The itemid provides a global identifier for an "item". This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.
The |
||||||||||||
itemprop | This attribute provides one or more properties to one or more "items".
Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. Each token must be one of the following:
Also, |
||||||||||||
itemref | This attribute is used in conjunction with the |
||||||||||||
itemscope | HTML5 elements that have the itemscope attribute create a name-value pair called an "item". Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
||||||||||||
itemtype | This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.
The |
||||||||||||
lang | Sets the language code to be used.
Possible values: [Must be a valid RFC 3066 language code, or an empty string.] |
||||||||||||
spellcheck | Specifies whether the element should have its spelling checked.
If this attribute is missing, the element will use the default behavior, possibly based on the parent's own |
||||||||||||
style | Specifies inline styles for this <video> element. This allows you to define the styles within the page, and within this <video> tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
|
||||||||||||
tabindex | Helps determine the tabbing order for the element (for when the user uses the "tab" key on their keyboard to "tab" through the elements on the page in order to select an element).
Possible values: [Any valid integer. For example, 0, 1, 2, 3, ...etc] |
||||||||||||
title | Specifies a title to associate with this particular <video> element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").
Possible values: [Any text to be displayed as a "tool tip".] |
||||||||||||
translate | Determines whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
The
If the |
Event Handlers
This element also accepts various event handlers. Event handlers are commonly used to extend the functionality of an HTML element.
For a list of event handlers that you can use with this element, see Event handlers on elements, Document objects, and Window objects at the W3C website.
More Information About the <video>
Element
Content Categories |
|
---|---|
Can be used | Where embedded content is expected. |
Content model | |
End Tag Required? | Yes. Any time you use the <video> element, it must have both a start tag and an end tag.
|
DOM Interface | HTMLVideoElement |
Specifications for the <video>
Element
Here is the <video>
element defined in the various specifications:
Web Server Support for the <video>
Element
You must ensure that your web server supports the video format that you use. More specifically, you need to ensure your web server supports the MIME type of your video.
Apache
If you're using an Apache web server, you can add the following code to your httpd.conf
file or to an .htaccess
file in the directory where your video file is:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
IIS 7
If you're using IIS, from the GUI:
- Open IIS and navigate to your website (or the level you want to manage)
- Double-click MIME Types
- In the Actions pane, click Add.
- In the Add MIME Type dialog box, type a file name extension in the File name extension text box. For example, type .ogg.
- Type a MIME type in the MIME type text box. For example, type video/ogg.
- Click OK.
Plesk
If you're using Plesk control panel:
- Select the website you want to configure (if you have more than one website)
- Go to Web Directories
- Click on the MIME Types tab
- Click Add New MIME Type
- Enter the file extension into the Extension field (eg, .ogg)
- Enter the content into the Content field (eg, video/ogg). Alternatively, you may be able to select the value from the drop down menu (if it's available).
- Click OK