L'attribut HTML controls

L'attribut HTML controls est un attribut boolean qui indique au navigateur d'afficher ses commandes de lecture intégrées pour un élément <audio> ou <video>. Il a été introduit avec HTML5.

Pourquoi l'attribut controls est important

Par défaut, les éléments <audio> et <video> ne rendent aucune interface visible. Un élément <audio> sans controls est complètement invisible sur la page, et un élément <video> sans cet attribut n'affiche que la première image (ou un cadre noir) sans aucun moyen de démarrer la lecture.

L'ajout de controls donne aux utilisateurs la possibilité de lire, mettre en pause, effectuer une recherche et régler le volume — et permet aux utilisateurs de clavier et de lecteurs d'écran d'interagir avec le média. Sauf si vous construisez un lecteur JavaScript personnalisé en fournissant vos propres commandes accessibles, vous souhaiterez presque toujours inclure controls. L'omettre sans remplacement constitue à la fois un problème d'ergonomie et d'accessibilité.

Quelles commandes sont affichées

Pour l'élément <audio>, les commandes du navigateur fournissent généralement :

Lecture / Pause
Barre de progression (défilement)
Temps actuel / durée
Volume / sourdine

Pour l'élément <video>, elles fournissent généralement :

Lecture / Pause
Barre de progression (défilement)
Temps actuel / durée
Volume / sourdine
Basculement plein écran
Sous-titres / légendes (lorsqu'un élément <track> de kind="captions" ou kind="subtitles" est présent)
Image dans l'image / téléchargement / « lire sur un autre appareil » (selon le navigateur)

L'ensemble exact des commandes — et leur apparence — n'est pas standardisé. Chrome, Firefox, Safari, Edge et les navigateurs mobiles affichent chacun leur propre interface native, et certaines commandes (comme les sous-titres ou le téléchargement) n'apparaissent que lorsqu'elles sont pertinentes. Considérez l'apparence comme un détail propre au navigateur que vous ne contrôlez pas entièrement.

Syntaxe

controls est un attribut boolean : sa simple présence active les commandes. La valeur n'a pas d'importance, donc controls, controls="" et controls="controls" sont tous équivalents. Pour l'omettre, ne mettez pas du tout l'attribut.

<audio controls></audio>

Exemple : controls sur l'élément `<audio>`

<!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>

Essayez vous-même »

Le texte à l'intérieur de l'élément (« Your browser does not support… ») est un contenu de substitution pour les navigateurs très anciens. Remplacez la valeur de src par le chemin de votre propre fichier audio ou par toute URL audio HTTPS accessible.

Exemple : controls sur l'élément `<video>`

Ici, plusieurs éléments <source> permettent au navigateur de choisir le premier format qu'il peut lire. Remplacez par vos propres fichiers ou une URL HTTPS stable.

<!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>

Essayez vous-même »

Supprimer des commandes spécifiques avec controlslist

Lorsque vous souhaitez conserver la plupart des commandes natives mais en masquer une ou deux, les navigateurs basés sur Chromium (Chrome, Edge, Opera) prennent en charge l'attribut associé controlslist. Il accepte une liste de jetons séparés par des espaces qui désactivent des commandes individuelles :

nodownload — masquer le bouton de téléchargement
nofullscreen — masquer le bouton plein écran (vidéo)
noremoteplayback — masquer le bouton « lire sur un autre appareil » / diffusion

<video controls controlslist="nodownload nofullscreen noremoteplayback">
  <source src="movie.mp4" type="video/mp4">
</video>

controlslist ne fait pas partie d'une norme finalisée et est actuellement une fonctionnalité de Chromium, donc Firefox et Safari l'ignorent. Il ne fait que masquer les éléments d'interface — ce n'est pas un mécanisme de sécurité ou de DRM, et un utilisateur déterminé peut toujours accéder au média.

controls avec autoplay et muted

Si vous combinez controls avec autoplay, la plupart des navigateurs bloqueront la lecture automatique avec le son. Ajoutez l'attribut muted pour que le média soit autorisé à démarrer, et l'utilisateur pourra le désactiver via les commandes :

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

Sujets connexes

Pratique

À quoi sert l'attribut HTML 'controls' ?

Il est utilisé pour contrôler le comportement d'un tableau HTML.Il est utilisé pour proposer des commandes supplémentaires dans un élément texte.Il est utilisé pour ajouter des commandes multimédia par défaut à un élément audio ou vidéo.Il est utilisé pour manipuler des images dans un document HTML.