HTML <video> Tag
The HTML <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:
<track> element with kind="subtitles" or kind="captions". This ensures deaf or hard-of-hearing users can comprehend the audio content.
Examples
Basic Usage
This example uses the <video> element to present a video. 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, .mp4)
- Enter the content into the Content field (eg, video/mp4). 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.
The <video> element accepts the following attributes.
| 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. |
||||||
poster | Specifies an image to show while the video is downloading, or until the user hits play. 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 allows the author to provide a hint to the browser/user agent.
Possible values:
|
||||||
autoplay | Specifies whether or not to start playing the video as soon as it can do so without stopping.
Note: Browsers often block autoplay unless the video is also |
||||||
loop | Specifies whether to keep re-playing the video once it has finished. | ||||||
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. | ||||||
controls | Specifies whether or not to display video controls (such as a play/pause button, volume, fullscreen, etc). | ||||||
playsinline | A boolean attribute indicating that the video is to be played "inline", that is, within the element's playback area. Particularly important for mobile devices (e.g., iOS Safari) to prevent videos from automatically entering fullscreen mode upon playback. | ||||||
disablepictureinpicture | Prevents the browser from offering a Picture-in-Picture context menu or taking the video into Picture-in-Picture mode automatically. | ||||||
disableremoteplayback | Disables the ability to remote playback (e.g., via AirPlay or Google Cast) on devices attached to the browser. | ||||||
width | Specifies the width, in pixels, to display the video. | ||||||
height | Specifies the height, in pixels, to display the video. |
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <video> tag , as well as with all other HTML tags.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
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.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
For more detail, see HTML event handler content attributes.