W3docs
es
Iniciar sesión

Atributo HTML autoplay

El atributo HTML autoplay indica que el audio o video comenzará a reproducirse automáticamente en cuanto sea posible. Aprende a usarlo en los elementos <audio> y <video>.

El atributo HTML autoplay es un atributo boolean que indica al navegador que empiece a reproducir el audio o el video de forma automática, tan pronto como pueda hacerlo sin necesidad de pausar la carga.

Puedes usar este atributo en los siguientes elementos: <audio> y <video>.

Dado que autoplay es un atributo boolean, su mera presencia significa "activado". No se le asigna un valor — autoplay y autoplay="" son equivalentes, y escribir algo como autoplay="false" no lo desactiva. Para deshabilitar la reproducción automática, elimina el atributo por completo.

Sintaxis

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

Por qué los navegadores bloquean el autoplay

En la práctica, añadir autoplay a menudo no es suficiente — los navegadores modernos rechazarán silenciosamente el inicio de la reproducción. Esto es intencional. Las páginas que emiten sonido en cuanto cargan son una experiencia notoriamente mala, por lo que los navegadores aplican políticas de autoplay:

  • El autoplay silenciado está permitido. Los medios sin sonido (o silenciados) tienen permitido reproducirse automáticamente al cargar la página, ya que no pueden sorprender al usuario.
  • El autoplay con sonido está restringido. Para reproducir automáticamente con sonido, el navegador generalmente requiere una señal de intención por parte del usuario, como:
    • un gesto del usuario en la página (un clic o toque) antes de que se solicite la reproducción, o
    • en Chrome, un Media Engagement Index alto — una puntuación por sitio que Chrome mantiene basándose en la frecuencia con la que el usuario ha reproducido medios allí anteriormente.
  • Safari es estricto por defecto. Safari bloquea el autoplay con sonido en la mayoría de los sitios y permite a los usuarios deshabilitarlo por sitio en su configuración. El autoplay silenciado sigue funcionando.

La conclusión: para un autoplay fiable, el medio debe estar silenciado. Añade el atributo muted junto con autoplay (véalo en acción en la página de <video>).

Nota: <audio autoplay> por sí solo (el audio nunca está silenciado por defecto) será bloqueado en los navegadores modernos. Un <video autoplay muted> sí se reproducirá. Para reproducir audio automáticamente, siléncialo primero o inícialo desde una interacción del usuario.

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

Ejemplo del atributo HTML autoplay utilizado en el elemento <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>
Pruébalo tú mismo »

Ejemplo del atributo HTML autoplay utilizado en el elemento <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>
Pruébalo tú mismo »

Iniciar la reproducción con JavaScript

A veces es necesario activar la reproducción desde código en lugar de usar el atributo autoplay — por ejemplo, cuando el usuario hace clic en un botón personalizado. Llamar a element.play() devuelve una Promise que se resuelve cuando comienza la reproducción y se rechaza si el navegador la bloquea (casi siempre porque el medio tiene sonido y no hubo ningún gesto del usuario).

Maneja siempre el rechazo para que un autoplay bloqueado no genere un error no capturado. Un patrón habitual es recurrir a la reproducción silenciada:

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

Accesibilidad y experiencia de usuario

Los medios con reproducción automática — especialmente con sonido — pueden ser desorientadores e intrusivos. Según WCAG 1.4.2 (Control de audio), cualquier audio que se reproduzca automáticamente durante más de 3 segundos debe ofrecer una forma de pausarlo, detenerlo o silenciarlo de forma independiente al volumen general del sistema. El enfoque más seguro es:

  • Preferir el autoplay silenciado y permitir que los usuarios activen el sonido cuando lo deseen.
  • Proporcionar siempre controls para que el usuario pueda detener la reproducción.
  • Evitar la reproducción automática de contenido con sonido a menos que el usuario lo haya solicitado explícitamente.

Práctica

Práctica
¿Qué afirmación sobre el atributo HTML 'autoplay' es correcta?
¿Qué afirmación sobre el atributo HTML 'autoplay' es correcta?

Temas relacionados con los medios

Was this page helpful?