HTML tags | video
Tags: html, tags, video
Published: 2021-10-05 06:19:47

It is used to **embed a video in a document**. To do this, several sources are defined inside using `<source>` and the browser will choose the first one it can use. The text contained within `<video>` will serve as an alternative to display in case the browser cannot use any of the `<source>`.

It has several attributes:
* `autoplay`: is a Boolean value that specifies whether the video starts playing as soon as possible without waiting for the data to finish loading. To cancel it, it is not enough to put `autoplay="false"` since `autoplay` works as long as it is present in the `<video>` tag, beyond its value, therefore the attribute will have to be eliminated. In some browsers `autoplay` does not work if the `muted` attribute is present. Be careful when using this attribute as videos or audios that are played automatically can be annoying for many people. If the `autoplay` function is to be offered, it is best to request that the user specifically activate it.
* `autoPictureInPicture`: is a Boolean value that, being `true`, indicates that the item should use _picture-in-picture_ mode when the user switches between this document and another document or application.
* `buffered`: can be read to get the time ranges of the buffered video. Contains a `TimeRanges` object.
* `controls`: if present, the browser will show the user the controls for play, stop, volume, search...
* `controlslist`: if specified, helps the browser select which controls to display when using its own set of controls (for example when the `controls` attribute is specified). It can have the values `​​nodownload`, `nofullscreen` and `noremoteplayback`. If you want to disable the _picture-in-picture_ mode and its control, you must use the `disablePictureInPicture` attribute.
* `crossorigin`: is an enumerated attribute that indicates whether to use CORS to get the corresponding video. CORS-enabled resources can be reused in the `<canvas>` element without being corrupted. When not present, the video is retrieved without a CORS request (that is, without sending the `Origin:` HTTP header), preventing its use without corrupting it on `<canvas>` elements. If invalid, it is handled as if the enumerated keyword `anonymous` had been used. The allowed values ​​are:
  * `anonymous`: sends a cross-origin request without a credential, that is, sends the `Origin:` HTTP header without a cookie, X.509 certificate or without 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 resource will be corrupted and its use restricted.
  * `use-credentials`: send a cross-origin request with a credential, that is, send the `Origin:` HTTP header with a cookie, a certificate or by performing HTTP Basic authentication. If the server does not provide credentials to the origin site (via the `Access-Control-Allow-Credentials:` HTTP header), the resource will be corrupted and its use restricted.
* `currentTime`: returns a two-digit floating point indicating the current playback position specified in seconds. If the video has not started playing yet, the time interval at which it will start is returned. Assigning a value to `currentTime` sets the current playback position to that value and searches the video at that position if it is loaded. If streaming, the browser may not be able to get certain parts of the video if the data has already expired in the buffer. Other videos may have a timeline that doesn't start at 0 seconds, so setting `currentTime` to a previous value would fail. The `getStartDate()` method can be used to determine the starting point of the timeline.
* `disablePictureInPicture`: prevents the browser from suggesting a _picture-in-picture_ context menu or requesting such a mode automatically in certain cases.
* `disableRemotePlayback`: it is a Boolean value that disables the remote playback capability on devices connected through wired (HDMI, DVI...) and wireless (Miracast, Chromecast, DLNA, AirPlay...) technologies. In Safari, `x-webkit-airplay="deny"` can be used as an alternative.
* `duration`: it is a read-only attribute with a two-digit floating point value that indicates the total duration of the video in seconds. If there is no element present or it is invalid the returned value is `NaN`. If the end of the video is unknown (for example streaming, radio, videos from WebRTV...) the returned value is `+Infinity`.
* `height`: the height of the video display area, in pixels (only absolute values, not percentages).
* `loop`: this is a Boolean value that, if specified, causes the video to automatically replay from the beginning after completion.
* `muted`: a Boolean value that indicates the default value of the audio contained in the video. If initialized, the audio will be muted at the beginning. Its default value is `false`, that is, the audio will be heard when the video is played.
* `playsinline`: a Boolean value that indicates that the video will be played “online”, that is, within the element's play area. The absence of this attribute does not imply that the video will always play in full screen.
* `poster`: a URL to display an image while the video is downloading. If not specified, nothing is displayed until the first frame is available, and then that first frame is displayed as a poster.
* `preload`: it is an enumerated value that indicates to the browser what content preloaded before playback can lead to a better user experience, although the browser is not obliged to follow it as it is only an indication. The `autoplay` attribute prevails over the `preload` attribute, since if `autoplay` is specified, the browser obviously needs to start downloading the video in order to play it. It can contain one of the following values, the default value being able to vary in each browser (the specification advises that it be `metadata`):
  * `none`: the video does not have to be preloaded.
  * `metadata`: only the metadata of the video (for example, its duration) needs to be preloaded.
  * `auto`: the entire video must be preloaded, even if the user may not be able to use it.
  * _empty string_: synonym of the value `auto`.
* `src`: the URL of the video. It is optional, you can use the `<source>` element inside the `<video>` element instead to specify the video to embed.
* `width`: the width of the video display area, in pixels (only absolute values, not percentages).

**Videos must provide captions and transcripts that accurately describe their content**. Closed captions allow hearing impaired users to understand the audio content of a video as it plays, while transcripts allow people who need additional time to review the audio content at a pace and format that is comfortable for them.

If you want to subtitle only audio files, it is necessary to use a `<video>` element, since the `<audio>` element does not allow to embed subtitles. This is one of the situations where it is useful to play only audio using a `<video>` element.

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

In addition to spoken dialogue, **captions and transcripts should also identify music and sound effects that convey important information**, such as emotion and tone.

**The subtitles should not obstruct the viewing of the video**. They can be placed using align in the VTT cue setup.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) | [Support](https://caniuse.com/video)