Pseudo-classe CSS :muted
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Want more browser support for this feature? Tell us why.
La pseudo-classe CSS :muted représente un élément capable de produire du son, tel que <audio> ou <video>, mais qui est muet (silencieux de force).
La pseudo-classe :muted est différente de :volume-locked en ce sens que l'auteur·ice de la page a le contrôle sur la possibilité de couper ou de rétablir le son d'un élément multimédia.
Les agents utilisateurs peuvent définir la valeur muted des médias en fonction des préférences d'utilisation (par exemple, en mémorisant la dernière valeur définie entre les sessions, sur une base par site, ou autrement).
Un élément qui est :volume-locked ne peut pas être coupé, rétabli ou avoir son volume modifié avec JavaScript en raison d'une préférence du système d'exploitation ou de l'agent utilisateur.
Syntaxe
:muted {
/* ... */
}
Exemples
HTML
L'attribut muted est ajouté à l'élément HTML <video> afin que le son soit coupé, cela fonctionne de la même manière pour les éléments HTML <audio>.
<!-- 'Big Buck Bunny' sous licence CC 3.0 par la Blender Foundation. Hébergé par archive.org -->
<!-- Posté depuis 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">
Désolé, votre navigateur ne prend pas en charge les vidéos intégrées, mais ne
vous inquiétez pas, vous pouvez
<a href="https://archive.org/details/BigBuckBunny_124"> la télécharger </a>
et la regarder avec votre lecteur vidéo préféré !
</video>
CSS
Si l'élément <video> est muted, un contour rouge est dessiné autour de celui-ci, lorsqu'il n'est pas coupé, il a un contour vert. Essayez de basculer l'icône de sourdine dans les contrôles pour voir l'état changer.
video:muted {
outline: 5px solid red;
}
video:not(:muted) {
outline: 5px solid green;
}
Spécifications
| Spécification |
|---|
| Selectors Level 4 # selectordef-muted |
| HTML # selector-muted |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:buffering - La pseudo-classe
:paused - La pseudo-classe
:playing - La pseudo-classe
:seeking - La pseudo-classe
:stalled - La pseudo-classe
:volume-locked - Sélecteurs CSS
- Propriété
muteddes objetsHTMLMediaElement