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:

  1. Select the website you want to configure (if you have more than one website)
  2. Go to Web Directories
  3. Click on the MIME Types tab
  4. Click Add New MIME Type
  5. Enter the file extension into the Extension field (eg, .ogg)
  6. 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).
  7. 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.

AttributeDescription
srcSpecifies the location of the video file. Its value must be the URI of a video file.
crossoriginThis 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:

ValueDescription
anonymousCross-origin CORS requests for the element will not have the credentials flag set. In other words, there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication.
use-credentialsCross-origin CORS requests for the element will have the credentials flag set.

If this attribute is not specified, CORS is not used at all.

An invalid keyword and an empty string will be handled as the anonymous value.
posterSpecifies 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.
preloadSpecifies 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:

  • none
  • metadata
  • auto

Note that the autoplay attribute can overrride the preload attribute (since if the media plays, it naturally has to buffer first, regardless of the hint given by the preload attribute). Despite this, you can still provide both attributes.
autoplaySpecifies 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 autoplay or autoplay="autoplay").

Possible values:

  • [Empty string]
  • autoplay
mediagroupFor 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 mediagroup attribute could be used is where you need to overlay a sign-languge interpreter track from one movie file over the top of another.
loopSpecifies 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 loop or loop="loop").

Possible values:

  • [Empty string]
  • loop
mutedControls 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 muted or muted="muted").

Possible values:

  • [Empty string]
  • muted
controlsSpecifies 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 controls or controls="controls").

Possible values:

  • [Empty string]
  • controls
widthSpecifies the width, in pixels, to display the video.

Possible values:

[Non-negative integer] (for example, 300)
heightSpecifies 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 elements. Therefore, you can use these attributes with the <video> tag , as well as with all other HTML tags.

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.

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.