Audio and Video Tags

Audio and Video Tags

·

4 min read

audio tag

The audio HTML element is used to embed sound content in the website. It may contain one or more audio sources, represented using the src attribute or the element: the browser will choose the most suitable one.

Attributes

autoplay

A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.

controls

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

controlslist

The controlslist attribute, when specified, helps the browser select what controls to show for the audio element whenever the browser shows its own set of controls (that is, when the controls attribute is specified). The allowed values are nodownload, nofullscreen and noremoteplayback.

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related audio file. CORS-enabled resources can be reused in the element without being tainted. The allowed values are anonymous, use-credentials.

disableremoteplayback

A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.). See this proposed specification for more information.

loop

A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.

muted

A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:

  • none
  • metadata
  • auto

src

The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the element within the audio block to specify the audio to embed.

video tag

The video HTML element embeds a media player which supports video playback into the document. You can use video for audio content as well, but the audio element may provide a more appropriate user experience.

Attributes

Like all other HTML elements, this element supports the global attributes.

autoplay

A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. To disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the video tag at all. To remove autoplay, the attribute needs to be removed altogether.

autopictureinpicture

A Boolean attribute which if true indicates that the element should automatically toggle 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, seeking, and pause/resume playback.

disablepictureinpicture

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

disableremoteplayback

A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.).

height

The height of the video's display area, in CSS pixels (absolute values only; no percentages).

loop

A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.

muted

A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.

playsinline

A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

poster

A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played.

src

The URL of the video to embed. This is optional; you may instead use the element within the video block to specify the video to embed.

width

The width of the video's display area, in CSS pixels (absolute values only; no percentages).