HTML autoplay-Attribut

Das HTML-Attribut autoplay ist ein boolean-Attribut, das den Browser anweist, Audio oder Video automatisch abzuspielen, sobald dies ohne Unterbrechung des Ladevorgangs möglich ist.

Dieses Attribut kann auf den folgenden Elementen verwendet werden: <audio> und <video>.

Da autoplay ein boolean-Attribut ist, bedeutet seine bloße Anwesenheit „ein". Es erhält keinen Wert — autoplay und autoplay="" bedeuten dasselbe, und etwas wie autoplay="false" zu schreiben schaltet es nicht aus. Um Autoplay zu deaktivieren, muss das Attribut vollständig entfernt werden.

Syntax

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

Warum Browser Autoplay blockieren

In der Praxis reicht das einfache Hinzufügen von autoplay oft nicht aus — moderne Browser verweigern die Wiedergabe stillschweigend. Dies ist beabsichtigt. Seiten, die beim Laden sofort Ton abspielen, sind bekanntermaßen eine schlechte Nutzererfahrung, weshalb Browser nun Autoplay-Richtlinien durchsetzen:

Stummgeschaltetes Autoplay ist erlaubt. Medien ohne Ton (oder stumm geschaltete Medien) dürfen beim Seitenaufruf automatisch abgespielt werden, da sie den Benutzer nicht erschrecken können.
Hörbares Autoplay ist eingeschränkt. Um mit Ton automatisch abzuspielen, benötigt der Browser üblicherweise ein Signal für die Benutzerabsicht, zum Beispiel:
- eine Benutzergeste auf der Seite (ein Klick oder Tippen) bevor die Wiedergabe angefordert wird, oder
- in Chrome einen hohen Media Engagement Index — ein seitenspezifischer Wert, den Chrome darauf basierend pflegt, wie oft der Benutzer dort bereits Medien abgespielt hat.
Safari ist standardmäßig streng. Safari blockiert hörbares Autoplay auf den meisten Seiten und lässt Benutzer in ihren Einstellungen Autoplay pro Seite deaktivieren. Stummgeschaltetes Autoplay funktioniert weiterhin.

Das Fazit: Für zuverlässiges Autoplay muss das Medium stummgeschaltet sein. Fügen Sie das muted-Attribut zusammen mit autoplay hinzu (sehen Sie es in Aktion auf der Seite <video>).

Hinweis: <audio autoplay> allein (Audio ist standardmäßig nie stummgeschaltet) wird in modernen Browsern blockiert. Ein <video autoplay muted> wird abgespielt. Um Audio automatisch abzuspielen, stummschalten Sie es zuerst oder starten Sie es durch eine Benutzerinteraktion.

<!-- 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>

Beispiel für das HTML-Attribut autoplay beim `<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>

Probier es selbst »

Beispiel für das HTML-Attribut autoplay beim `<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>

Probier es selbst »

Wiedergabe mit JavaScript starten

Manchmal muss die Wiedergabe per Code ausgelöst werden, anstatt das autoplay-Attribut zu verwenden — zum Beispiel, nachdem der Benutzer auf eine benutzerdefinierte Schaltfläche geklickt hat. Das Aufrufen von element.play() gibt ein Promise zurück, das aufgelöst wird, wenn die Wiedergabe beginnt, und abgelehnt wird, wenn der Browser sie blockiert (meistens weil das Medium Ton hat und keine Benutzergeste vorlag).

Behandeln Sie die Ablehnung immer, damit ein blockiertes Autoplay keinen nicht abgefangenen Fehler wirft. Ein verbreitetes Muster ist der Rückfall auf stummgeschaltete Wiedergabe:

<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>

Barrierefreiheit und UX

Automatisch abspielende Medien — insbesondere mit Ton — können desorientierend und störend sein. Gemäß WCAG 1.4.2 (Audio Control) muss jedes Audio, das automatisch länger als 3 Sekunden abgespielt wird, eine Möglichkeit zum Pausieren, Stoppen oder Stummschalten unabhängig von der Systemlautstärke bieten. Der sicherste Ansatz ist:

Stummgeschaltetes Autoplay bevorzugen und Benutzern ermöglichen, den Ton bei Bedarf einzuschalten.
Stets controls bereitstellen, damit der Benutzer die Wiedergabe stoppen kann.
Hörbaren Inhalt nicht automatisch abspielen, es sei denn, der Benutzer hat dies ausdrücklich gewünscht.

Übung

Welche Aussage über das HTML-Attribut 'autoplay' ist korrekt?

Für zuverlässiges Autoplay in modernen Browsern sollte das Medium auch 'muted' sein.Das Attribut 'autoplay' kann durch 'autoplay="false"' deaktiviert werden.Ein '<audio autoplay>'-Element (ohne 'muted') spielt garantiert mit Ton beim Seitenaufruf ab.Das Attribut 'autoplay' kann nur beim '<img>'-Element verwendet werden.Das Attribut 'autoplay' muss immer mit dem Attribut 'controls' kombiniert werden, um zu funktionieren.