autoplay

The HTML autoplay attribute asks the browser to start audio or video automatically. This article explains the basic syntax, browser restrictions, and why unexpected sound should be avoided.

What you will learn

That autoplay is a request, not a guaranteed command
How to use it with audio and video
Why muted playback and user controls matter for accessibility and UX

Basic syntax

<video src="intro.mp4" autoplay muted controls></video>

autoplay is a boolean attribute. Its presence requests automatic playback; writing autoplay="false" does not turn it off. Remove the attribute when automatic playback is not wanted.

Why does autoplay sometimes not work?

Browsers can block automatic playback, especially when media has audible sound. The decision can depend on browser policy, user settings, previous interaction with the site, power-saving mode, and the device.

muted: Starts the video without sound. Muted autoplay is more likely to be allowed, but it still should serve a clear purpose.
controls: Gives users playback controls. It is usually a good default when media is meaningful content.
playsinline: Asks compatible mobile browsers to play video within the page instead of forcing fullscreen.
preload: Hints how much media data to load. It is separate from whether playback begins automatically.

A responsible pattern

<video
  src="preview.mp4"
  autoplay
  muted
  loop
  playsinline
  controls>
  Your browser cannot play this video.
</video>

Use automatic playback only when it helps the user understand the page. Never rely on autoplay for essential information, and provide a way to pause or stop motion. Avoid unexpected sound and respect reduced-motion or user preference settings in the surrounding design.

Common mistakes