:muted CSS-Pseudoklasse
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Der :muted CSS-Pseudoklasse-Selektor repräsentiert ein Element, das in der Lage ist, Ton zu erzeugen, wie z. B. <audio> oder <video>, aber stummgeschaltet ist (erzwungene Stummschaltung).
Stummgeschaltet unterscheidet sich von :volume-locked darin, dass der Seitenautor die Kontrolle darüber hat, ob ein Medien-Element stummgeschaltet oder die Stummschaltung aufgehoben werden kann.
Benutzeragenten können den muted-Wert von Medien gemäß den Benutzereinstellungen setzen (z. B. indem sie den zuletzt gesetzten Wert über Sitzungen hinweg, pro Seite oder auf andere Weise merken).
Ein Element, das :volume-locked ist, kann aufgrund von Präferenzen des Betriebssystems oder des Benutzeragenten nicht stummgeschaltet, die Stummschaltung aufgehoben oder seine Lautstärke über JavaScript geändert werden.
Syntax
:muted {
/* ... */
}
Beispiele
HTML
Das Attribut muted wird dem <video>-Element hinzugefügt, sodass der Ton stummgeschaltet ist; dies funktioniert ebenso für <audio>-Elemente.
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
controls
muted
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="620">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="https://archive.org/details/BigBuckBunny_124">download it</a>
and watch it with your favorite video player!
</video>
CSS
Wenn das <video>-Element muted ist, wird ein roter Umriss darum gezeichnet. Ist es nicht stummgeschaltet, hat es einen grünen Umriss. Versuchen Sie, das Stummschaltsymbol in den Steuerelementen umzuschalten, um den Statuswechsel zu sehen.
video:muted {
outline: 5px solid red;
}
video:not(:muted) {
outline: 5px solid green;
}
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # selectordef-muted |
| HTML # selector-muted |
Browser-Kompatibilität
Siehe auch
:buffering:paused:playing:seeking:stalled:volume-locked- CSS-Selektoren
muted-Eigenschaft vonHTMLMediaElement-Objekten