<video>: the "video embed" element

The HTML <video> element embeds a media player that supports playing videos in the document. You can also use <audio> for audio content, but the <audio> element may provide a more appropriate user experience.

Attributes

autoplay

A Boolean attribute; if specified, the video automatically starts playing as soon as it can without interrupting data loading.

To disable video autoplay, autoplay="false" will not work; the video will automatically play if the attribute is present in the <video> tag. To remove autoplay, the attribute must be removed entirely.

In some browsers (e.g. Chrome 70.0) autoplay does not work if no muted attribute is present.

autopictureinpicture

A Boolean attribute that if set to true indicates that the element should automatically activate picture-in-picture mode when the user switches back and forth between this document and another document or application.

controls

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

controlslist

The controlslist attribute, when specified, helps the browser select which controls to show on the media whenever the browser displays its own set of controls (for example when the controls attribute is specified).

Allowed values are nodownload, nofullscreen and noremoteplayback.

Use the disablepictureinpicture attribute if you want to disable Picture-In-Picture mode (and control).

crossorigin

This enumerated attribute indicates whether to use CORS to retrieve the related video. CORS-enabled assets can be reused in the <canvas> element without being contaminated. The allowed values are:

anonymous

Send a cross-origin request without credentials. In other words, it sends the Origin HTTP header without cookies, an X.509 certificate, or performing HTTP Basic Authentication. If the server does not provide credentials to the origin site (by not setting the Access-Control-Allow-Origin HTTP header), the image will be contaminated and its use will be limited.

use-credentials

Submit a multi-origin request with one credential. In other words, send the Origin HTTP header with a cookie, certificate, or by performing HTTP Basic authentication. If the server does not provide credentials to the origin site (via Access-Control-Allow-Credentials HTTP header), the image will be contaminated and its use will be limited.

When not present, the resource is retrieved without a CORS request (i.e. without sending the Origin:HTTP header), preventing its untainted use in <video> elements. If invalid, it is handled as if anonymous had used the enumerated keyword.

disablepictureinpicture

Prevents the browser from suggesting a Picture-in-Picture context menu or automatically prompting Picture-in-Picture in some cases.

disableremoteplayback

A Boolean attribute used to disable remote play capability on devices connected via wired (HDMI, DVI, etc.) and wireless (Miracast, Chromecast, DLNA, AirPlay, etc.) technology.

height

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

loop

A Boolean attribute; if specified, the browser will automatically try to return to the beginning when the end of the video is reached.

muted

A Boolean attribute that indicates the default audio content in the video. If set, the audio will initially be muted. Its default value is false, which means that audio will play while the video plays.

playsinline

A Boolean attribute indicating that the video should play "inline", that is, within the element's playback area. Please note that the absence of this attribute does not mean that the video will always play in full screen.

poster

A URL for an image to display while the video downloads. If this attribute is not specified, nothing is displayed until the first frame is available, then the first frame is displayed as the poster frame.

preload

This enumerated attribute is intended to provide a hint to the browser as to what the author believes will lead to the best user experience regarding the loaded content before playing the video. It can 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 retrieved.
  • auto: Indicates that the entire video file can be downloaded, even if the user is not intended to use it.
  • empty string: synonymous with the eigenvalue.

The default value is different for each browser. The spec recommends setting this to metadata.

src

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

width

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

Eventi

Evant name Triggered when
audioprocess The input buffer of a ScriptProcessorNode is ready to be processed.
canplay The browser can play the media, but estimates that not enough data has been loaded to play the media to the end without having to stop for further buffering of the content.
canplaythrough The browser estimates that it can play media files to the end without stopping for content buffering.
complete An OfflineAudioContext is finished rendering.
durationchange The duration attribute has been updated.
emptied The media has become empty; for example, this event is dispatched if the media has already been loaded (or partially loaded), and the (load) method to reload it is called.
ended Playback stopped because the end of the media was reached.
loadeddata The first frame of the media has finished loading.
loadedmetadata The metadata has been loaded.
pause Playback has been paused.
play Playback has started.
playing Playback is ready to begin after being paused or delayed due to lack of data.
progress Fired periodically when the browser loads a resource.
ratechange The playback speed is changed.
seeked A completed seek operation.
seeking A seeking operation has begun.
stalled The interpreter is attempting to retrieve media data, but the data is unexpectedly unavailable.
suspend Loading of media data has been suspended.
timeupdate The time indicated by the currentTime attribute was updated.
volumechange The volume has changed.
waiting Playback stopped due to a temporary lack of data.

Usage notes

Browsers don't all support the same video formats; you can provide multiple sources within nested <source> elements and the browser will then use the first one it understands.

<video controls>
  <source src="myVideo.webm" type="video/webm">
  <source src="myVideo.mp4" type="video/mp4">
  <p>Il tuo browser non supporta i video HTML5. Se vuoi
  qui c'è un <a href="myVideo.mp4">link al video</a></p>
</video>

Other usage notes:

  • If you don't specify the controls attribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and HTMLMediaElement API.
  • To allow precise control over video (and audio) content, HTMLMediaElement fires many different events. In addition to providing controllability, these events allow you to monitor the progress of media download and playback, as well as the playback status and location.
  • You can use the object-position property to adjust the positioning of the video within the item frame, and the object-fit property to control how the video size is adjusted to fit the frame.
  • To show subtitles/captions along with your video, you can use some JavaScript along with the <track> element and the WebVTT format.
  • You can play audio files using a <video> element. This can be useful if, for example, you need to run audio with a WebVTT transcription, since the <audio> element does not allow captions using WebVTT.
  • To test fallback content on browsers that support the <video> element, you can replace it with a non-existing element such as <videonote>.

Accessibility issues

Videos must provide both captions and transcripts that accurately describe the content. Subtitles allow people with hearing loss to understand the audio content of a video as the video plays, while transcriptions allow people who require more time to be able to review the audio content at a pace and a format they are comfortable with.

It's worth noting that while you can add subtitles to audio-only media, you can only do so while playing audio in a <video> element, as the element's video region is used to present captions. This is one of the special scenarios where it is useful to play audio in a video element.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.

In addition to voice dialogue, captions and transcripts should also identify music and sound effects that communicate important information.