HTML autoplay Attribute

Introduction

The autoplay attribute is an essential feature in HTML that allows developers to control the automatic playback of audio and video elements. This attribute can enhance the user experience by providing seamless multimedia content without requiring manual intervention.

What You’ll Learn

Purpose of autoplay

The primary purpose of the autoplay attribute is to specify whether a media element should start playing automatically when the page loads. This can be particularly useful for background music, promotional videos, or any other scenario where immediate playback is desired.

📝 Syntax

Add the boolean autoplay attribute to a <video> or <audio> element:

<video controls autoplay muted playsinline>
  <source src="clip.mp4" type="video/mp4">
</video>

Syntax Rules

• Boolean attribute—presence means playback should start automatically.
• Valid on <video> and <audio> elements.
• Omit the attribute entirely to use default non-autoplay behavior.
• Combine with controls so users can pause or adjust volume.

💎 Values

The autoplay attribute accepts a boolean value:

• autoplay (present) — Indicates that the media should start playing automatically.
• true (JavaScript property) — Another way of specifying that the media should start playing automatically when set via script.
• false (JavaScript property or omitted attribute) — Specifies that the media should not start playing automatically. This is the default behavior if the autoplay attribute is not present.

<!-- HTML: presence enables autoplay -->
<video autoplay muted></video>

<!-- JavaScript property -->
<script>
  videoElement.autoplay = true;
  videoElement.autoplay = false;
</script>

Applicable Elements

Examples Gallery

Video autoplay example and dynamic JavaScript autoplay.

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

<video id="dynamicVideo" controls muted>
  <source src="example.mp4" type="video/mp4">
</video>

<script>
  // Dynamically set autoplay for a video element
  var videoElement = document.getElementById("dynamicVideo");
  videoElement.autoplay = true;
  videoElement.load();
</script>

♿ Accessibility

• Avoid surprise audio — Autoplay with sound can disorient users and screen reader users.
• Provide controls — Always include controls so users can pause, mute, or adjust volume.
• Respect preferences — Consider users with vestibular disorders; avoid flashing autoplay loops without warning.
• Offer alternatives — Do not rely on autoplay alone to convey essential information.
• Test with reduced motion — Some users prefer less automatic movement on pages.

💡 Best Practices

• Use the autoplay attribute responsibly, as automatic playback can be intrusive and affect the user experience negatively.
• Consider providing user controls (controls attribute) alongside autoplay to allow users to pause or adjust the volume of the media.
• Be aware that some browsers may have restrictions on autoplay to prevent unwanted noise or disruption, especially if the page is not interacted with by the user.