Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

HTML 5 <video> Tag

The HTML 5 <video> tag is used to specify video on an HTML document. For example, you could embed a music video on your web page for your visitors to listen to and watch.

The HTML 5 <video> tag accepts attributes that specify how the video should be played. Attributes include preload, autoload, 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.

The <video> tag was introduced in HTML 5 (officially referred to as HTML5 - without the space). Although HTML5 is still in draft status at the time of writing (August 2010), HTML5 video is quite widely implemented in the major browsers. It also has support from major websites such as YouTube. Read more about YouTube's support for HTML5 video further down this page.

Example

This example demonstrates usage of the <video> tag.

Source CodeResult

If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. Ogg). In this case, try the same code, but with a different file format.

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.

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 5 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.

Here are the standard HTML 5 event handler content attributes.

  • 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.

YouTube HTML5 Video

At the time of writing (August 2010), YouTube is experimenting with HTML5 support. If users opt in, they will be directed to the HTML5 video player (instead of the Flash player). Given the diminishing support for Flash applications (particularly among Apple products), HTML5 video is almost certain to become the most popular technology for displaying videos on the web.

According to their website, YouTube HTML5 video currently supports browsers that support both the video tag in HTML5 and either the h.264 video codec or the WebM format (with VP8 codec). These include:

  • Firefox 4 (WebM)
  • Google Chrome (h.264 supported now, WebM enabled version available via Early Release Channel)
  • Opera 10.6+ (WebM)
  • Apple Safari (h.264, version 4+)
  • Microsoft Internet Explorer 9 (h.264)
  • Microsoft Internet Explorer 6, 7, or 8 with Google Chrome Frame installed

For more information on YouTube support for HTML5 video, see YouTube HTML5 video player.

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:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

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

Also see the HTML 4.01 tags


Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites