HTML autoplay Attribute
The HTML autoplay attribute requests that an audio or video resource begin playing automatically as soon as the browser is able to play it. It is a Boolean attribute used with the <audio> and <video> elements, although browsers may prevent automatic playback based on their autoplay policies and the user's preferences.
Syntax
The autoplay attribute is added to the opening <audio> or <video> tag.
<video src="video.mp4" autoplay></video>Because autoplay is a Boolean attribute, its presence requests automatic playback and no value is required.
Attribute Value
| Value | Description |
|---|---|
| Boolean attribute | When present, requests that the media resource begin playing automatically as soon as the browser can play it. |
Elements That Use the autoplay Attribute
The autoplay attribute is currently valid on the <audio> and <video> elements.
Using the autoplay Attribute
The following example requests automatic playback of a video:
<video src="video.mp4" autoplay controls></video>The browser attempts to begin playback when the media is ready, but the presence of autoplay does not guarantee that playback will begin. Browser policies and user preferences can prevent autoplay.
Browser Autoplay Restrictions
Modern browsers commonly restrict automatic playback, especially when the media contains audible sound. A browser may require prior user interaction with the page or may apply other conditions before allowing audible media to start automatically.
Muted video is generally more likely to be allowed to autoplay than video containing audible sound. The exact behavior can vary according to the browser, device, site permissions, and user settings.
Autoplaying Muted Video
When automatic video playback is appropriate, combining autoplay with the muted attribute is commonly used because current browsers generally permit muted media to autoplay more readily.
<video src="video.mp4" autoplay muted controls></video>The muted attribute starts the video without audible sound. Providing controls also gives the user a way to control playback and volume.
autoplay and preload
The autoplay attribute can override the loading behavior suggested by the preload attribute. If the browser allows a media resource to autoplay, the resource must be loaded sufficiently for playback to begin.
<video src="video.mp4" preload="none" autoplay muted></video>For this reason, do not rely on preload="none" to prevent media from loading when autoplay is also present.
Accessibility Considerations
Use autoplay carefully. Media that begins unexpectedly can distract users, interfere with screen readers, and make a page more difficult to use. Automatically playing audio can be particularly disruptive.
When autoplay is necessary, consider starting media muted and provide visible controls so users can pause playback or adjust the sound. In many situations, allowing the user to start the media manually provides a better experience.
Boolean Attribute
The autoplay attribute is a Boolean attribute. Its presence requests automatic playback.
<!-- Autoplay requested -->
<video src="video.mp4" autoplay></video>
<!-- Autoplay not requested -->
<video src="video.mp4"></video>Writing autoplay="false" does not disable autoplay because the attribute is still present. To stop requesting automatic playback, remove the attribute entirely.
Common Mistakes
Do not assume that adding autoplay guarantees automatic playback. Browsers can block autoplay according to their policies and the user's settings.
Do not use autoplay="false" to disable autoplay. Since autoplay is a Boolean attribute, remove it instead.
Do not assume that audible autoplay will behave the same as muted autoplay. Current browsers commonly apply stricter restrictions to media that contains audible sound.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The autoplay attribute is widely supported on media elements, but browsers can restrict whether audio or video is actually allowed to begin playing automatically.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the autoplay Attribute
The example uses autoplay with muted on a video. Depending on your browser and settings, the video may begin playing automatically when the example loads.
Summary
The HTML autoplay attribute is a Boolean attribute used with the <audio> and <video> elements to request automatic playback. Browser autoplay policies can prevent playback, particularly when media contains audible sound. When autoplay is appropriate, muted media with visible playback controls generally provides a more predictable and user-friendly experience.