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 putautoplay="false"
sinceautoplay
works as long as it is present in the<video>
tag, beyond its value, therefore the attribute will have to be eliminated. In some browsersautoplay
does not work if themuted
attribute is present. Be careful when using this attribute as videos or audios that are played automatically can be annoying for many people. If theautoplay
function is to be offered, it is best to request that the user specifically activate it. -
autoPictureInPicture
: is a Boolean value that, beingtrue
, 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 aTimeRanges
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 thecontrols
attribute is specified). It can have the valuesnodownload
,nofullscreen
andnoremoteplayback
. If you want to disable the picture-in-picture mode and its control, you must use thedisablePictureInPicture
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 theOrigin:
HTTP header), preventing its use without corrupting it on<canvas>
elements. If invalid, it is handled as if the enumerated keywordanonymous
had been used. The allowed values are:-
anonymous
: sends a cross-origin request without a credential, that is, sends theOrigin:
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 theAccess-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 theOrigin:
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 theAccess-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 tocurrentTime
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 settingcurrentTime
to a previous value would fail. ThegetStartDate()
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 isNaN
. 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 isfalse
, 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. Theautoplay
attribute prevails over thepreload
attribute, since ifautoplay
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 bemetadata
):-
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
Top comments (0)