Attribut controls HTML
L'attribut controls HTML est un attribut booléen qui spécifie que les contrôles audio/vidéo doivent être affichés. Il est nouveau dans HTML5.
Vous pouvez utiliser l'attribut controls sur les éléments suivants : <audio> et <video>.
Pour la balise <audio>, l'attribut controls fournit généralement :
- Lecture
- Pause
- Recherche
- Volume
Pour la balise <video>, l'attribut controls fournit généralement :
- Lecture
- Pause
- Recherche
- Volume
- Mode plein écran
- Sous-titres/Légendes
- Pistes
Remarque : Les contrôles exacts affichés dépendent de l'implémentation du navigateur et de la prise en charge des formats multimédias.
Syntaxe
Syntaxe de l'attribut controls HTML
<audio controls></audio>Exemple de l'attribut controls HTML utilisé sur l'élément <audio> :
Exemple de l'attribut HTML "controls " utilisé sur l'élément <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://fr.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Exemple de l'attribut controls HTML utilisé sur l'élément <video> :
Exemple de l'attribut HTML "controls " utilisé sur l'élément <video>
<!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://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>Remarque : Lors de l'utilisation de autoplay avec controls, il est recommandé d'inclure également l'attribut muted pour respecter les politiques de lecture automatique des navigateurs modernes.
Pratique
À quoi sert l'attribut HTML 'controls' ?