W3docs
de
Anmelden

HTML controls-Attribut

Das controls-Attribut ist ein boolean-Attribut und gibt an, dass die Audio-/Video-Steuerelemente angezeigt werden müssen. Beispiele zur Verwendung an verschiedenen Elementen.

Das HTML-Attribut controls ist ein boolean-Attribut, das den Browser anweist, seine eingebauten Wiedergabe-Steuerelemente für ein <audio>- oder <video>-Element anzuzeigen. Es wurde in HTML5 eingeführt.

Warum das controls-Attribut wichtig ist

Standardmäßig rendern <audio>- und <video>-Elemente keine sichtbare Benutzeroberfläche. Ein <audio>-Element ohne controls ist auf der Seite vollständig unsichtbar, und ein <video>-Element ohne dieses Attribut zeigt nur den ersten Frame (oder eine schwarze Box) ohne Möglichkeit, die Wiedergabe zu starten.

Das Hinzufügen von controls gibt Nutzern die Möglichkeit, die Wiedergabe zu starten, zu pausieren, zu spulen und die Lautstärke anzupassen — und ermöglicht Tastatur- und Screenreader-Nutzern, das Medium zu bedienen. Sofern Sie keinen eigenen JavaScript-Player entwickeln und eigene barrierefreie Steuerelemente bereitstellen, sollten Sie controls fast immer einbinden. Das Weglassen ohne Ersatz ist sowohl ein Benutzerfreundlichkeits- als auch ein Barrierefreiheitsproblem.

Welche Steuerelemente angezeigt werden

Für das <audio>-Element bieten die Browser-Steuerelemente in der Regel:

  • Play / Pause
  • Suchleiste (Scrubbing)
  • Aktuelle Zeit / Dauer
  • Lautstärke / Stummschalten

Für das <video>-Element bieten sie in der Regel:

  • Play / Pause
  • Suchleiste (Scrubbing)
  • Aktuelle Zeit / Dauer
  • Lautstärke / Stummschalten
  • Vollbild-Umschalter
  • Untertitel / Bildunterschriften (wenn ein <track> mit kind="captions" oder kind="subtitles" vorhanden ist)
  • Bild-in-Bild / Herunterladen / „Auf einem anderen Gerät abspielen" (browserabhängig)

Die genaue Auswahl der Steuerelemente — und ihr Aussehen — ist nicht standardisiert. Chrome, Firefox, Safari, Edge und mobile Browser rendern jeweils ihre eigene native Benutzeroberfläche, und einige Steuerelemente (wie Untertitel oder Download) erscheinen nur, wenn sie relevant sind. Behandeln Sie das Erscheinungsbild als ein Browser-Detail, das Sie nicht vollständig kontrollieren können.

Syntax

controls ist boolean: seine bloße Anwesenheit aktiviert die Steuerelemente. Der Wert spielt keine Rolle, daher sind controls, controls="" und controls="controls" alle gleichwertig. Um es wegzulassen, lassen Sie das Attribut vollständig weg.

<audio controls></audio>

Beispiel: controls am <audio>-Element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button to hear the clip.</p>
  </body>
</html>
Probier es selbst »

Der Text innerhalb des Elements („Your browser does not support…") ist Fallback-Inhalt für sehr alte Browser. Ersetzen Sie src durch Ihren eigenen Audiodateipfad oder eine erreichbare HTTPS-Audio-URL.

Beispiel: controls am <video>-Element

Hier ermöglichen mehrere <source>-Elemente dem Browser, das erste abspielbare Format auszuwählen. Ersetzen Sie die Dateien durch eigene oder eine stabile HTTPS-URL.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>
Probier es selbst »

Einzelne Steuerelemente mit controlslist entfernen

Wenn Sie die meisten nativen Steuerelemente behalten, aber eines oder zwei ausblenden möchten, unterstützen Chromium-basierte Browser (Chrome, Edge, Opera) das verwandte Attribut controlslist. Es nimmt eine durch Leerzeichen getrennte Liste von Token entgegen, die einzelne Steuerelemente deaktivieren:

  • nodownload — Download-Schaltfläche ausblenden
  • nofullscreen — Vollbild-Schaltfläche ausblenden (Video)
  • noremoteplayback — Schaltfläche „Auf einem anderen Gerät abspielen" / Casting ausblenden
<video controls controlslist="nodownload nofullscreen noremoteplayback">
  <source src="movie.mp4" type="video/mp4">
</video>

controlslist ist kein Teil eines finalisierten Standards und ist derzeit eine Chromium-Funktion, daher ignorieren Firefox und Safari es. Es blendet lediglich UI-Elemente aus — es ist kein Sicherheits- oder DRM-Mechanismus, und ein entschlossener Nutzer kann weiterhin auf das Medium zugreifen.

controls mit autoplay und muted

Wenn Sie controls mit autoplay kombinieren, blockieren die meisten Browser die automatische Wiedergabe mit Ton. Fügen Sie das Attribut muted hinzu, damit das Medium starten darf, und der Nutzer es über die Steuerelemente lautlos schalten kann:

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

Verwandte Themen

Übung

Übung
Wofür wird das HTML-Attribut 'controls' verwendet?
Wofür wird das HTML-Attribut 'controls' verwendet?
Was this page helpful?