W3docs
fr
Se connecter

L'attribut HTML autoplay

L'attribut HTML autoplay indique que l'audio ou la vidéo démarrera automatiquement dès que possible. Découvrez son utilisation sur les éléments <audio> et <video>.

L'attribut HTML autoplay est un attribut boolean qui indique au navigateur de démarrer la lecture de l'audio ou de la vidéo automatiquement, dès qu'il peut le faire sans s'arrêter pour terminer le chargement.

Vous pouvez utiliser cet attribut sur les éléments suivants : <audio> et <video>.

Puisque autoplay est un attribut boolean, sa simple présence signifie « activé ». Vous ne lui donnez pas de valeur — autoplay et autoplay="" signifient la même chose, et écrire quelque chose comme autoplay="false" ne le désactive pas. Pour désactiver l'autoplay, supprimez entièrement l'attribut.

Syntaxe

<tag autoplay>&lt;/tag&gt;

Pourquoi les navigateurs bloquent l'autoplay

En pratique, ajouter simplement autoplay ne suffit souvent pas — les navigateurs modernes refuseront silencieusement de démarrer la lecture. C'est intentionnel. Les pages qui diffusent du son dès leur chargement sont notoirement une mauvaise expérience, c'est pourquoi les navigateurs appliquent désormais des politiques d'autoplay :

  • L'autoplay en mode muet est autorisé. Les médias sans son (ou mis en sourdine) sont autorisés à démarrer automatiquement au chargement de la page, car ils ne peuvent pas surprendre l'utilisateur.
  • L'autoplay sonore est restreint. Pour démarrer automatiquement avec du son, le navigateur exige généralement un signal d'intention ou d'intérêt de la part de l'utilisateur, par exemple :
    • un geste de l'utilisateur sur la page (un clic ou un toucher) avant que la lecture soit demandée, ou
    • dans Chrome, un Media Engagement Index élevé — un score par site que Chrome calcule selon la fréquence à laquelle l'utilisateur a déjà lu des médias sur ce site.
  • Safari est strict par défaut. Safari bloque l'autoplay sonore sur la plupart des sites et permet aux utilisateurs de désactiver l'autoplay par site dans leurs paramètres. L'autoplay en mode muet fonctionne toujours.

La conclusion : pour un autoplay fiable, le média doit être mis en sourdine. Ajoutez l'attribut muted avec autoplay (voir en action sur la page <video>).

Remarque : <audio autoplay> seul (l'audio n'est jamais mis en sourdine par défaut) sera bloqué dans les navigateurs modernes. Un <video autoplay muted> sera lu. Pour lancer automatiquement de l'audio, mettez-le d'abord en sourdine ou démarrez-le depuis une interaction utilisateur.

<!-- Plays automatically: video, muted -->
<video autoplay muted src="movie.mp4"></video>

<!-- Usually BLOCKED: audio always has sound -->
<audio autoplay src="song.mp3"></audio>

<!-- Plays automatically: muted audio (silent, but it plays) -->
<audio autoplay muted src="song.mp3"></audio>

Exemple de l'attribut HTML autoplay utilisé sur l'élément <audio> :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls autoplay>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
      <source src="/build/audios/audio.mp3" type="audio/mpeg" />
    </audio>
    <p>Click the play button</p>
  </body>
</html>
Essayez vous-même »

Exemple de l'attribut HTML autoplay utilisé sur l'élément <video> :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay muted>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>
Essayez vous-même »

Démarrer la lecture avec JavaScript

Parfois, vous devez déclencher la lecture depuis le code plutôt que via l'attribut autoplay — par exemple, après qu'un utilisateur clique sur un bouton personnalisé. L'appel de element.play() retourne une Promise qui se résout lorsque la lecture démarre et qui est rejetée si le navigateur la bloque (le plus souvent parce que le média a du son et qu'il n'y avait pas de geste de l'utilisateur).

Gérez toujours le rejet pour qu'un autoplay bloqué ne génère pas d'erreur non interceptée. Un modèle courant consiste à revenir à la lecture en mode muet :

<video id="clip" muted src="movie.mp4"></video>

<script>
  const video = document.getElementById("clip");

  const promise = video.play();

  if (promise !== undefined) {
    promise
      .then(() => {
        // Autoplay started successfully.
      })
      .catch((error) => {
        // Autoplay was prevented. Mute the video and try again,
        // or show a play button so the user can start it.
        video.muted = true;
        video.play();
      });
  }
</script>

Accessibilité et expérience utilisateur

La lecture automatique de médias — surtout avec du son — peut être désorientante et intrusive. Selon WCAG 1.4.2 (Audio Control), tout audio qui se lance automatiquement pendant plus de 3 secondes doit offrir un moyen de le mettre en pause, de l'arrêter ou de le couper indépendamment du volume général du système. L'approche la plus sûre consiste à :

  • Préférer l'autoplay en mode muet et laisser les utilisateurs activer le son à la demande.
  • Toujours fournir controls pour que l'utilisateur puisse arrêter la lecture.
  • Éviter la lecture automatique de contenu sonore, sauf si l'utilisateur l'a explicitement demandé.

Pratique

Pratique
Quelle affirmation concernant l'attribut HTML 'autoplay' est correcte ?
Quelle affirmation concernant l'attribut HTML 'autoplay' est correcte ?

Sujets multimédia associés

Was this page helpful?