Estados multimedia

Observa siete estados reales de audio y vídeo, ajusta su presentación y distingue reproducción, carga y sonido.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Configuración

Estado multimedia

El selector se evalúa sobre los elementos nativos. Usa sus controles o los botones de la preview para provocar estados reales.

Elemento objetivo

Color del indicador

Color de superficie

Muestra el estilo configurado sin afirmar que el medio coincide con el selector.

La simulación ayuda con estados transitorios o dependientes del navegador. El recuento superior continúa reflejando únicamente coincidencias reales.

Selector actual.media-state-demo :where(video.media-sample, audio.media-sample):playing

Soporte sin confirmarEspecificidad—

Preparando el escenario y sus resultados…

:playing coincide durante la reproducción, incluidas interrupciones temporales por falta de datos.

Pulsa Reproducir o usa los controles nativos para activar :playing.

Vídeo

Audio

El navegador mantiene :playing durante pausas temporales de carga; Pausar cambia al estado :paused.

HTML

<section class="media-state-demo">
  <video class="media-sample" controls playsinline preload="metadata" src="/media/demo-video.mp4"></video>
  <audio class="media-sample" controls preload="metadata" src="/media/demo-audio.mp3"></audio>
</section>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<section class="grid max-w-[44rem] gap-4">
  <video class="w-full rounded-2xl border-2 border-[color-mix(in_srgb,_currentColor_24%,_transparent)] bg-[Canvas] transition duration-200 [&:playing]:border-[#6d5dfc] [&:playing]:bg-[#e9f8ff] [&:playing]:shadow-[0_0_0_4px_color-mix(in_srgb,_#6d5dfc_42%,_transparent)] [&:playing]:scale-[1.02]" controls playsinline preload="metadata" src="/media/demo-video.mp4"></video>
  <audio class="w-full rounded-2xl border-2 border-[color-mix(in_srgb,_currentColor_24%,_transparent)] bg-[Canvas] transition duration-200 [&:playing]:border-[#6d5dfc] [&:playing]:bg-[#e9f8ff] [&:playing]:shadow-[0_0_0_4px_color-mix(in_srgb,_#6d5dfc_42%,_transparent)] [&:playing]:scale-[1.02]" controls preload="metadata" src="/media/demo-audio.mp3"></audio>
</section>

CSS

.media-state-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 44rem;
}

.media-state-demo :where(video.media-sample, audio.media-sample) {
  inline-size: 100%;
  border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 1rem;
  background-color: Canvas;
  transition: border-color 200ms ease, box-shadow 200ms ease, scale 200ms ease;
}

.media-state-demo :where(video.media-sample, audio.media-sample):playing {
  border-color: #6d5dfc;
  background-color: #e9f8ff;
  box-shadow: 0 0 0 4px color-mix(in srgb, #6d5dfc 42%, transparent);
  scale: 1.02;
}

.media-state-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 44rem;

  :where(video.media-sample, audio.media-sample) {
    inline-size: 100%;
    border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 1rem;
    background-color: Canvas;
    transition: border-color 200ms ease, box-shadow 200ms ease, scale 200ms ease;
  }
}

.media-state-demo {
  :where(video.media-sample, audio.media-sample):playing {
    border-color: #6d5dfc;
    background-color: #e9f8ff;
    box-shadow: 0 0 0 4px color-mix(in srgb, #6d5dfc 42%, transparent);
    scale: 1.02;
  }
}

Guía educativa de selectores de estados multimedia

Siete estados definidos por el reproductor

Elige la pseudoclase por la fase del medio que necesitas comunicar, no por el evento JavaScript que recuerdes.

Volver al playground

Reproducción

Distingue avanzar, estar pausado y buscar una posición nueva.

:playing

Medios en estado de reproducción.

Especificidad(0, 1, 0)

Comportamiento

Incluye pausas temporales por buffering o stalled.
Deja de coincidir cuando el usuario pausa o termina la reproducción.

Ejemplos

SelectorEspecificidad(0, 1, 1)

video:playing

HTML

→Coincide: <video controls src="lesson.mp4"></video>
<audio controls src="lesson.mp3"></audio>

Errores frecuentes

No significa que currentTime esté cambiando en cada instante.
No lo sustituyas por la ausencia de :paused.

Consultar la definición completa

:paused

Medios que no están en estado de reproducción.

Especificidad(0, 1, 0)

Comportamiento

Suele coincidir antes de iniciar y tras una pausa explícita.
Es mutuamente excluyente con :playing.

Ejemplos

SelectorEspecificidad(0, 1, 1)

audio:paused

HTML

<video controls src="lesson.mp4"></video>
→Coincide: <audio controls src="lesson.mp3"></audio>

Errores frecuentes

No describe una espera causada por falta de datos.
No presupongas que solo aparece tras pulsar un botón.

Consultar la definición completa

:seeking

Medios que buscan una posición de reproducción.

Especificidad(0, 1, 0)

Comportamiento

Puede durar muy pocos fotogramas.
Se activa al mover la posición, incluso mediante controles nativos.

Ejemplos

SelectorEspecificidad(0, 2, 1)

.player video:seeking

HTML

<div class="player">
→Coincide:   <video controls src="film.mp4"></video>
</div>

Errores frecuentes

No equivale a buffering.
No uses una simulación para reportar una coincidencia real.

Consultar la definición completa

Carga

Separa una espera temporal de una transferencia estancada.

:buffering

Medios detenidos temporalmente mientras obtienen datos.

Especificidad(0, 1, 0)

Comportamiento

El medio conserva la intención de reproducirse.
El estado implica :playing.

Ejemplos

SelectorEspecificidad(0, 1, 1)

video:buffering

HTML

→Coincide: <video controls src="lesson.mp4"></video>
<audio controls src="lesson.mp3"></audio>

Errores frecuentes

No es una pausa del usuario.
No garantiza que la descarga completa siga activa.

Consultar la definición completa

:stalled

Medios cuya obtención de datos se ha detenido de forma inesperada.

Especificidad(0, 1, 0)

Comportamiento

Describe una interrupción anómala de la transferencia.
También implica :playing.

Ejemplos

SelectorEspecificidad(0, 2, 0)

.podcast:stalled

HTML

→Coincide: <audio class="podcast" controls src="episode.mp3"></audio>

Errores frecuentes

No es sinónimo de cualquier espera breve.
No depende del evento stalled para el estilo CSS.

Consultar la definición completa

Sonido

Diferencia silenciar el medio de tener el volumen bloqueado por la plataforma.

:muted

Medios cuyo audio está silenciado.

Especificidad(0, 1, 0)

Comportamiento

Responde al estado muted del elemento.
Puede coexistir con reproducción o pausa.

Ejemplos

SelectorEspecificidad(0, 1, 1)

video:muted

HTML

→Coincide: <video muted controls src="intro.mp4"></video>
<video controls src="talk.mp4"></video>

Errores frecuentes

Volumen cero y muted no son conceptos idénticos.
No depende de ocultar los controles de volumen.

Consultar la definición completa

:volume-locked

Medios cuyo volumen no puede cambiarse.

Especificidad(0, 1, 0)

Comportamiento

La plataforma o el navegador controlan el estado.
Puede coincidir aunque el medio no esté silenciado.

Ejemplos

SelectorEspecificidad(0, 1, 1)

audio:volume-locked

HTML

<video controls src="lesson.mp4"></video>
→Coincide: <audio controls src="lesson.mp3"></audio>

Errores frecuentes

No existe una API para forzarlo con fines de demostración.
No lo confundas con disabled, que no aplica al elemento multimedia.

Consultar la definición completa

Preview del selector

:playing

Comportamiento

Ejemplos

Errores frecuentes

:paused

Comportamiento

Ejemplos

Errores frecuentes

:seeking

Comportamiento

Ejemplos

Errores frecuentes

:buffering

Comportamiento

Ejemplos

Errores frecuentes

:stalled

Comportamiento

Ejemplos

Errores frecuentes

:muted

Comportamiento

Ejemplos

Errores frecuentes

:volume-locked

Comportamiento

Ejemplos

Errores frecuentes