W3docs
en
Log in

HTML autoplay Attribute

The HTML autoplay specifies that the audio or video will start playing automatically as soon as possible. See how to use it on the <audio> and <video> elements.

The HTML autoplay attribute is a boolean attribute that tells the browser to start playing the audio or video automatically, as soon as it can do so without stopping to finish loading.

You can use this attribute on the following elements: <audio> and <video>.

Because autoplay is a boolean attribute, its mere presence means "on." You don't give it a value — autoplay and autoplay="" mean the same thing, and writing something like autoplay="false" does not turn it off. To disable autoplay, remove the attribute entirely.

Syntax

<tag autoplay>&lt;/tag&gt;

Why browsers block autoplay

In practice, simply adding autoplay is often not enough — modern browsers will silently refuse to start playback. This is intentional. Pages that blast sound the moment they load are a notoriously bad experience, so browsers now enforce autoplay policies:

  • Muted autoplay is allowed. Media that has no sound (or is muted) is permitted to autoplay on page load, because it can't startle the user.
  • Audible autoplay is restricted. To autoplay with sound, the browser usually requires a signal of user intent or interest, such as:
    • a user gesture on the page (a click or tap) before play is requested, or
    • in Chrome, a high Media Engagement Index — a per-site score Chrome keeps based on how often the user has previously played media there.
  • Safari is strict by default. Safari blocks audible autoplay on most sites and lets users disable autoplay per-site in their settings. Muted autoplay still works.

The takeaway: for reliable autoplay, the media must be muted. Add the muted attribute together with autoplay (see it in action on the <video> page).

Note: <audio autoplay> on its own (audio is never muted by default) will be blocked in modern browsers. A <video autoplay muted> will play. To autoplay audio, mute it first or start it from a user interaction.

<!-- Plays automatically: video, muted -->
<video autoplay muted src="movie.mp4"></video>

<!-- Usually BLOCKED: audio always has sound -->
<audio autoplay src="song.mp3"></audio>

<!-- Plays automatically: muted audio (silent, but it plays) -->
<audio autoplay muted src="song.mp3"></audio>

Example of the HTML autoplay attribute used on the <audio> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls autoplay>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
      <source src="/build/audios/audio.mp3" type="audio/mpeg" />
    </audio>
    <p>Click the play button</p>
  </body>
</html>
Try it Yourself »

Example of the HTML autoplay attribute used on the <video> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay muted>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>
Try it Yourself »

Starting playback with JavaScript

Sometimes you need to trigger playback from code instead of the autoplay attribute — for example, after the user clicks a custom button. Calling element.play() returns a Promise that resolves when playback starts and rejects if the browser blocks it (most often because the media has sound and there was no user gesture).

Always handle the rejection so a blocked autoplay doesn't throw an uncaught error. A common pattern is to fall back to muted playback:

<video id="clip" muted src="movie.mp4"></video>

<script>
  const video = document.getElementById("clip");

  const promise = video.play();

  if (promise !== undefined) {
    promise
      .then(() => {
        // Autoplay started successfully.
      })
      .catch((error) => {
        // Autoplay was prevented. Mute the video and try again,
        // or show a play button so the user can start it.
        video.muted = true;
        video.play();
      });
  }
</script>

Accessibility and UX

Autoplaying media — especially with sound — can be disorienting and intrusive. Under WCAG 1.4.2 (Audio Control), any audio that plays automatically for more than 3 seconds must offer a way to pause, stop, or mute it independently of the overall system volume. The safest approach is to:

  • Prefer muted autoplay, and let users unmute on demand.
  • Always provide controls so the user can stop playback.
  • Avoid autoplaying audible content unless the user clearly asked for it.

Practice

Practice
Which statement about the HTML 'autoplay' attribute is correct?
Which statement about the HTML 'autoplay' attribute is correct?
Was this page helpful?