HTML controls-Attribut
Das HTML controls-Attribut ist ein boolesches Attribut und legt fest, dass die Audio-/Video-Steuerelemente angezeigt werden müssen. Es wurde mit HTML5 eingeführt.
Sie können das controls-Attribut auf den folgenden Elementen verwenden: <audio> und <video>.
Für das <audio>-Tag bietet das controls-Attribut typischerweise Folgendes:
- Abspielen
- Pause
- Suchen/Springen
- Lautstärke
Für das <video>-Tag bietet das controls-Attribut typischerweise Folgendes:
- Abspielen
- Pause
- Suchen/Springen
- Lautstärke
- Vollbild umschalten
- Untertitel
- Track
Hinweis: Die genau angezeigten Steuerelemente hängen von der Browserimplementierung und der Unterstützung des Medienformats ab.
Syntax
Syntax des HTML controls-Attributs
<audio controls></audio>Beispiel für die Verwendung des HTML controls-Attributs auf dem <audio>-Element:
Beispiel für die Verwendung des HTML "controls "-Attributs auf dem <audio>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://de.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Beispiel für die Verwendung des HTML controls-Attributs auf dem <video>-Element:
Beispiel für die Verwendung des HTML "controls "-Attributs auf dem <video>-Element
<!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="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>Hinweis: Bei der Verwendung von autoplay zusammen mit controls wird empfohlen, auch das Attribut muted einzufügen, um modernen Browser-Autoplay-Richtlinien zu entsprechen.
Praxis
Wofür wird das HTML-Attribut 'controls' verwendet?