video element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The video element embeds video resources in a document. Despite being so easy to use, this element can be very adaptable, powerful and cross-browser.

Authors have two ways to tell browsers which resource is to be loaded. The first, and most direct, is specifying the URI of the resource in the src attribute. The second method increases compatibility among browsers, working toghether with the source element. With the source element you can provide different alternatives of the same resource, and let browsers pick the one that's more suitable for them.

Whatever way you choose to include the video source, you can always fill the element with alternative content, so browsers not supporting it will have something to display. This becomes very handy for webmasters that need to develop backward compatible websites, as they can provide an alternative flash video player or a message informing the user about the support issue (and possible ways to resolve it). If the browser supports the video element, the alternative content will be simply ignored.

One or more track elements can be set inside any media element to provide extra information, such as subtitles, captions or descriptions, that will enhance user's experiece.

Authors must choose one of the two ways to specify an video resource but never both. If you declare the src attribute you won't be able to provide alternatives with the source element.

Examples

In the next example we'll insert a video using the src attribute, while we instruct the browser to provide controls for the user to manage its playback. To make controls available, we'll set the boolean attribute controls.

We'll also provide fallback content so users with browsers not supporting the video element will be informed about the issue and will have a small guidance about how to proceed. Additionally we'll specify the size of the video with the attributes width and height.

<video src="/assets/videos/A_Flight_To_Mars.ogg" width="384" height="288" controls>
  <p>Your browser doesn't support video playback natively or doesn't have the required Ogg codecs. You may want to upgrade to a modern browser with more features, in order to view the video file.</p>
</video>

That may have worked well, but the problem with the previous code is that it only provides one source and, as its format is Ogg, it won't play in all browsers. So, lets remove the src attribute and put some source elements, each with a version of the video in a particular format, to allow browsers to choose the version they are capable of playing.

For browsers supporting the video element, there's no need to provide more than two formats (MP4 and Ogg) to make our video cross-browser. Nevertheless, we're going to make available a third version, WebM, for being the best candidate to become the web's video standard in the near future.

To improve compatibility even further, we'll place the MP4 version first, to avoid a particular bug in iPad browsers.

<video width="384" height="288" controls>
  <source src="/assets/videos/A_Flight_To_Mars.mp4" type="video/mp4">
  <source src="/assets/videos/A_Flight_To_Mars.webm" type="video/webm">
  <source src="/assets/videos/A_Flight_To_Mars.ogg" type="video/ogg">
</video>

Lastly, we're going to try adding captions and subtitles to a video with the aid of track. The track element has been designed to provide subtitles, captions, descriptions, chapters or metadata for video and audio, but being relatively new, it's not fully supported cross-browser.

Note that captions or subtitles come in a special file format, wich in this case is WebVTT, although there are others.

Browser support for captions is incomplete. Authors may have to rely on client-side scripts to provide this functionality cross-browser until support grows.

<video width="384" height="288" controls>
  <source src="/assets/videos/Cyrano_de_Beryerac.mp4" type="video/mp4">
  <source src="/assets/videos/Cyrano_de_Beryerac.webm" type="video/webm">
  <source src="/assets/videos/Cyrano_de_Beryerac.ogg" type="video/ogg">
  <track kind="captions" label="Captions" src="/assets/videos/Cyrano_de_Beryerac_EN.vtt" srclang="en"></track>
  <track kind="subtitles" label="Subtítulos en español" src="/assets/videos/Cyrano_de_Beryerac_ES.vtt" srclang="es"></track>
</video>

The video element has some interesting attributes. You may want to check the next section.

Attributes

Specific attributes

src

The URI (location) of the media resource that will be played.

Authors shouldn't include source inside this element if the src attribute is present. Both methods for declaring media sources aren't meant to work together.

This attribute is mandatory if the itemprop attribute is present in the video element, as it's used to determine the value of the property.

Be aware that using the src attribute allows only one media source to be declared. If cross-browser compatibility is required, authors should use the source element instead, and define at least the two most supported formats (MP4 and Ogg).

Example

<video src="/assets/videos/Old_cartoon.ogg" width="384" height="288" controls></video>

crossorigin

An enumerated value indicating if the request made to the external server should present CORS credentials or not. This attribute is useful when embedding videos, located in other servers that allow cross-origin access, to be used with canvas. The two possible values are (case-insensitive):

  • anonymous: CORS requests for the element will have the "omit credentials" flag set.
  • use-credentials: CORS requests for the element won't have the "omit credentials" flag set.

Example

<video src="Automation.ogg" width="640" height="480" crossorigin="anonymous"></video>

poster

The address (URI) of an image that the browser can display in the space of this element while no video data is available.

The image declared in this attribute should be representative of the video provided by the element and give the user a hint of what he'll see when the media is played.

Example

<video poster="/assets/images/Laurel_and_Hardy.jpg" width="384" height="288" controls>
  <source src="/assets/videos/Laurel_and_Hardy.mp4" type="video/mp4">
  <source src="/assets/videos/Laurel_and_Hardy.webm" type="video/webm">
  <source src="/assets/videos/Laurel_and_Hardy.ogg" type="video/ogg">
</video>

playsinline

A boolean attribute that suggests browsers to display the video in the element's playback area by default, instead of showing it fullscreen or in an independent resizable window.

Most browsers already show videos in their element's playback area by default. The absence of this attribute may not have any effect in such situations.

Example

<video src="tsunami.ogg" width="640" height="480" playsinline></video>

preload

A hint for the browser that will help it decide if the media resource should be loaded as soon as possible (when the document is loaded). The attribute can define three states which advice the browser to perform the following tasks:

  • none: no data needs to be preloaded for the user and/or server would like to minimize unnecessary traffic.
  • metadata: only the resource's metadata (duration, dimensions, tracks, etc.) and probably the first few frames, can be considerer as needed for the user.
  • auto: the complete media resource can be preloaded at browser's discretion.

When the attribute takes the empty string ("") as value, or it's just present, the browser behaves as if the value "auto" was passed.

The value in this attribute gives only a hint to the browser about how to handle the preloading of the media resource. The behavior chosen by it isn't ruled by the standard, and therefore, can be unpredicible.

Example

<video width="384" height="288" controls preload>
  <source src="/assets/videos/Illusion.mp4" type="video/mp4">
  <source src="/assets/videos/Illusion.webm" type="video/webm">
  <source src="/assets/videos/Illusion.ogg" type="video/ogg">
</video>

autoplay

A boolean value indicating if the media playback should start as soon as the user agent is capable of doing so without having to stop for loading. If the attribute takes the value "autoplay" or the empty string (""), or if it's just present (with no value) the playback starts automatically.

Example

<video src="The_wound.mp4" width="640" height="480" autoplay></video>

loop

A boolen value indicating if the browser should automatically restart the playback of the media file once it reaches the end. If the attribute takes the value "loop" or the empty string (""), or if it's just present (with no value) the playback will be reapeated endlesly.

Example

<video width="384" height="288" controls loop>
  <source src="/assets/videos/Illusion.mp4" type="video/mp4">
  <source src="/assets/videos/Illusion.webm" type="video/webm">
  <source src="/assets/videos/Illusion.ogg" type="video/ogg">
</video>

muted

A boolen indicating if the media element should be muted (a state equivalent to having no volume). If the attribute takes the value "muted" or the empty string (""), or if it's just present (with no value) the sound output of the element will be muted.

If controls are present, browsers will usually provide a button to mute/unmute the element. This button should be present even when this attribute isn't set.

Example

<video width="384" height="288" controls muted>
  <source src="/assets/videos/Old_cartoon.mp4" type="video/mp4">
  <source src="/assets/videos/Old_cartoon.webm" type="video/webm">
  <source src="/assets/videos/Old_cartoon.ogg" type="video/ogg">
</video>

controls

A boolen value indicating that the browser should provide an interface to allow the user to control the playback, typically when the author doesn't provide a playback scripted controller. If the attribute takes the value "controls" or the empty string (""), or if it's just present (with no value) the playback controls will be provided.

Example

<video width="384" height="288" controls>
  <source src="/assets/videos/Charlie_Chaplin_The_tramp.mp4" type="video/mp4">
  <source src="/assets/videos/Charlie_Chaplin_The_tramp.webm" type="video/webm">
  <source src="/assets/videos/Charlie_Chaplin_The_tramp.ogg" type="video/ogg">
</video>

width

A number of pixels indicating the width that the video will take when embedded in the document.

There's no need to provide the real width of the video in this attribute. Howerver, specifiyng a different width may produce pixelated images (when bigger) or load periods longer than necessary (when smaller).

Example

<video src="Final.ogg" width="800" height="600"></video>

height

A number of pixels indicating the height that the video will take when embedded in the document.

There's no need to provide the real height of the video in this attribute. Howerver, specifiyng a different height may produce pixelated images (when bigger) or load periods longer than necessary (when smaller).

Example

<video src="Setup.ogg" width="640" height="480"></video>

meadiagroup

A string value that will link this media element to all other media elements with the same value in their meadiagroup attribute. All grouped media elements will share the same playback position and properties and, therefore, will play altoghether as one.

Authors can take advantage of this attribute to, for example, provide a video with a separate audio element containing multiple sources, one for each language supported. Another possibility, shown in the next example, is to provide two or more views of the same event, being different in format, version, point of view (camera), etc.

Although possible, there's no need to provide controls for more than one media element in a group. The commands executed in a control will affect all media elements in the group indistinctly.

This attribute has been recently introduced to the standard and, due to lack of implementation by browsers, deleted. Its use is currently invalid.

Example

<p>Here you'll be able to compare the two versions (colored and black and white) of the film "A trip to the moon", directed by Georges Méliès.</p>
<video width="384" height="288" mediagroup="trip_to_the_moon" controls>
  <source src="/assets/videos/A_trip_to_the_moon.mp4" type="video/mp4">
  <source src="/assets/videos/A_trip_to_the_moon.webm" type="video/webm">
  <source src="/assets/videos/A_trip_to_the_moon.ogg" type="video/ogg">
</video>
<video width="384" height="288" mediagroup="trip_to_the_moon">
  <source src="/assets/videos/A_trip_to_the_moon_colored.mp4" type="video/mp4">
  <source src="/assets/videos/A_trip_to_the_moon_colored.webm" type="video/webm">
  <source src="/assets/videos/A_trip_to_the_moon_colored.ogg" type="video/ogg">
</video>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.