HTML tags | video

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 | Support