HTML5 <video> Tag

The HTML <video> tag is used to embed video content in a document.

Both the starting and ending tag are mandatory for this element. The parent of the <video> tag can be any element that accepts embedded content.

The content premitted inside this element depends on certain conditions:

  • If the element has an src attribute: zero or more <track> elements, followed by transparent content that contains no media elements i.e., no <audio> or <video>.
  • Else, zero or more <source> elements, followed by zero or more <track> elements, followed by transparent content that contains no media elements i.e., no <audio> or <video>.

Attributes

autoplay

This is a Boolean attribute. When this is specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.

Note: Some versions of Chrome only acknowledge autostart, rather than autoplay

buffered

You can read the value of this attribute to determine the time ranges of the buffered media. This attribute contains a TimeRanges object.

controls

If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed valuesfor this attribute are:

  • anonymous: Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.

  • use-credentials: Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

height

The height of the video’s display area, in CSS pixels.

loop

A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.

muted

A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.

played

A TimeRanges object indicating all the ranges of the video that have been played.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:

  • none: indicates that the video should not be preloaded.
  • metadata: indicates that only video metadata (e.g. length) is fetched.
  • auto: indicates that the whole video file could be downloaded, even if the user is not expected to use it.
  • the empty string: synonym of the auto value.

If not set, its default value is browser-defined (i.e. each browser may have its default value). The spec advises it to be set to metadata.

The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.

The specification does not force the browser to follow the value of this attribute, it is a mere hint.

poster

A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn’t specified, nothing is displayed until the first frame is available; then the first frame is shown as the poster frame.

src

The URL of the video to embed. This is optional. You may instead use the <source> element within the video block to specify the video to embed.

width

The width of the video’s display area, in CSS pixels.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top