The `autoplay` attribute is a boolean attribute used with the `<audio>` and `<video>` elements. When present, it tells the browser to start playing the media as soon as it can be loaded, without waiting for the user to initiate playback.

Supported Elements

`<audio>`: Used to automatically play audio content.
`<video>`: Used to automatically play video content.

Practical Examples

Code:

<video controls autoplay muted>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Result:

Note: Autoplay usually requires the `muted` attribute to work in modern browsers.

Code:

<audio controls autoplay muted>
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Result:

Browser Policies & Best Practices

Autoplay Policies: Most modern browsers (Chrome, Firefox, Safari) block `autoplay` for media with sound to improve user experience. This prevents unexpected loud noises when a page loads.
Use `muted`: The most common way to enable `autoplay` is to also include the `muted` attribute. Muted videos are generally allowed to autoplay. You can then provide a UI control for the user to unmute the content.
Provide Controls: Always include the `controls` attribute so that users can pause, stop, or control the volume of the media, giving them full control over their experience.
Avoid Intrusion: Use `autoplay` sparingly. It is best suited for background videos or situations where the user expects media to start automatically.

Browser Compatibility

The `autoplay` attribute itself is universally supported. However, its **behavior** is subject to each browser's specific autoplay policies, which can change over time.

✔️ Google Chrome (with policies)
✔️ Mozilla Firefox (with policies)
✔️ Apple Safari (with policies)
✔️ Microsoft Edge (with policies)