HTML <video> Tag
The HTML 5 <video> tag is used for embedding video into an HTML document. The tag accepts attributes that specify how the video should be played.
Any content between the start and end <video> tags is fallback content. This content is displayed only by browsers that don't support the <video> element.
The <video> element can be used with the <track> tag to provide captions, subtitles, etc.
Syntax
The <video> tag is typically written as <video src=""></video> with the URL of the video file inserted between the double quotes of the src attribute.
The controls attribute can be specified to provide user controls for the interface (so that the user can stop, start, change the volume, etc). The width and height attributes can also be used to provide the width and height of the video (see "Template" below for all attributes that can be used with the <video> element).
Like this:
Examples
Basic Usage
This example uses the <video> element to present a video in .ogg format. It also provides content for any browser that doesn't support the <video> element.
Using the <track> Tag
This example uses the <track> element to provide subtitles for the video.
Web Server Support for MIME Type
You must ensure that your web server supports the video format that you use. If you find that your video plays OK on your local computer, but doesn't play on your live web server, it's probably because the live web server isn't configured properly for your video format. You need to ensure your web server supports the MIME type of your video.
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:
If you're using Plesk:
- 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
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The <video> element accepts the following attributes.
Element-Specific Attributes
This table shows the attributes that are specific to the <video> tag/element.
| Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|
| src | Specifies the location of the video file. Its value must be the URI 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 (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. | ||||||
| preload | Specifies whether the video should be preloaded or not, and if so, how it should be preloaded. This 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 | 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:
|
||||||
| 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.
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/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 HTML5 elements. Therefore, you can use these attributes with the <video> tag , as well as with all other HTML tags.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- inert
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
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.
Below are the standard HTML5 event handler content attributes.
Again, you can use any of these with the <video> element, as well as any other HTML5 element.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
For a full explanation of these attributes, see HTML 5 event handler content attributes.
Differences Between HTML 4 & HTML 5
The <video> element is new in HTML5.
To see more detail on the two versions see HTML5 <video> Tag. Also check out the links to the official specifications below.
Template
Here's a template for the <video> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.
For more information on attributes for this tag, see HTML5 <video> Tag.
Tag Details
For more details about the <video> tag, see HTML5 <video> Tag.
Specifications
Here are the official specifications for the <video> element.
- HTML5 Specification (W3C)
- HTML Living Standard (WHATWG)
- Current W3C Draft (the next version that is currently being worked on)
What's the Difference?
W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.