HTML Autoplay

by

HTML autoplay allows audio or video to start playing automatically when a web page loads. It can be useful for certain multimedia experiences, background videos, and presentations. However, modern browsers apply restrictions to autoplay, especially when media includes sound.

HTML provides the autoplay attribute for both the <audio> and <video> elements.

What Is HTML Autoplay?

The autoplay attribute tells the browser to start playing media automatically when it is ready. You do not need JavaScript to request autoplay.

For example, you can use autoplay with a video:

<video controls autoplay muted width="600">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

In this example, autoplay requests automatic playback, muted starts the video without sound, and controls lets visitors manage playback.

Learn more about multimedia elements in our HTML Media tutorial.

Using Autoplay with HTML Audio

You can also add the autoplay attribute to an audio element.

<audio autoplay controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

This code requests automatic audio playback when the file is ready. However, browsers commonly block autoplay when audio is audible unless the visitor has interacted with the page or another browser-specific condition permits it.

For a better user experience, let visitors choose when to start listening. See our HTML Audio tutorial for more examples.

Using Autoplay with HTML Video

Autoplay is often used for muted promotional videos, previews, and decorative background videos.

<video autoplay muted loop playsinline width="600">
  <source src="background.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

Here is what each attribute does:

  • autoplay requests automatic playback.
  • muted starts the video without sound.
  • loop repeats the video after it finishes.
  • playsinline helps the video play inline on supported mobile browsers.
  • width sets the video width.

The muted attribute often helps autoplay work because browsers commonly restrict automatic playback with sound. Autoplay is still subject to browser policies and user settings.

Why Is HTML Autoplay Not Working?

If your media does not start automatically, check these common causes:

  • Sound is enabled: The browser may block autoplay for media with sound.
  • Incorrect file path: The browser cannot load the specified media file.
  • Unsupported format or codec: The browser cannot play the file.
  • Browser restrictions: User settings or browser policies may prevent autoplay.
  • Media is not ready: The browser may need more time to load the file.

For videos that should autoplay, try using muted and ensure the file path is correct.

HTML Autoplay Best Practices

Autoplay should be used carefully because unexpected sounds or moving content can distract visitors.

  • Avoid automatically playing audio with sound.
  • Prefer muted autoplay for decorative videos when appropriate.
  • Include playback controls when visitors need to manage the media.
  • Respect browser restrictions instead of trying to bypass them.
  • Consider mobile users and accessibility needs.
  • Avoid unnecessary large media files that slow down page loading.

You can explore our related tutorials on HTML Video Controls, HTML Audio Controls, and HTML Loop.