Sistema de UI para Reproductor Multimedia

¿Qué hace Sistema de UI para Reproductor Multimedia?

Propósito

El Sistema de UI para Reproductor Multimedia proporciona un marco de diseño visual estandarizado, accesible y responsivo para integrar interfaces de reproductores de video y audio personalizados. Los controles nativos de HTML <video> y <audio> del navegador presentan graves limitaciones: estilo visual inconsistente entre navegadores, apariencia sin marca, mal espaciado táctil, densidad de control no optimizada en viewports móviles y accesibilidad impredecible del enfoque del teclado.

Diseñar un reproductor multimedia personalizado efectivo requiere equilibrar el encuadre del lienzo de video, superposiciones de degradado protector, jerarquía espacial de la barra de control (disparadores de reproducción/pausa, líneas de tiempo de desplazamiento, deslizadores de volumen, velocidad de reproducción, calidad, subtítulos, imagen en imagen, pantalla completa), transiciones responsivas de anclaje y cumplimiento total de accesibilidad WCAG AA. Esta habilidad une el diseño y la implementación técnica, definiendo reglas de diseño, estados de interacción, ergonomía táctil y controles de teclado y lectores de pantalla para experiencias de video y audio web.

Casos de uso

• Plataformas de aprendizaje y cursos en línea: Estructurar reproductores de video personalizados con selectores de velocidad de reproducción, marcadores de capítulo, alternancia de subtítulos, atajos de teclado y sincronización de transcripciones.
• Demostraciones de productos SaaS y videos destacados: Diseñar reproductores de video integrados ligeros y con marca, con disparadores de superposición flotante, controles de bucle/silencio y anclaje de imagen en imagen al desplazarse.
• Plataformas de podcasts y transmisión de audio: Construir docks de reproductor de audio persistentes en la parte inferior, reproductores de tarjetas de audio integradas, visualizadores de forma de onda y controles de salto hacia adelante/atrás.
• Portales multimedia y sitios de noticias editoriales: Presentar reproductores de video destacados responsivos con selectores de calidad, opciones de imagen en imagen, superposiciones de videos relacionados y subtítulos accesibles.
• Bibliotecas de componentes de sistemas de diseño: Establecer planos visuales de reproductores multimedia estandarizados y personalizables, y patrones de accesibilidad para sistemas de diseño empresariales.

Cuándo NO usar

• Controles del navegador sin estilo: Para herramientas internas rápidas o prototipos simples donde los controles nativos del navegador (atributo controls) son suficientes, el marcado HTML estándar es adecuado.
• Estaciones de trabajo de edición de video o línea de tiempo de lienzo completas: Para editores de video no lineales de múltiples pistas que requieren pistas de desplazamiento de línea de tiempo, manipulación de fotogramas clave y renderizado de lienzo WebGL, use aplicaciones especializadas de edición de video.
• Animaciones decorativas de fondo puras: Para animaciones ambientales CSS o de lienzo sin audio, controles de desplazamiento o controles de reproducción de usuario, use interface-motion-system o bucles de fondo silenciados estándar.
• Ligthboxes y galerías de imágenes estáticas: Para mostrar fotografías fijas o presentaciones de diapositivas sin reproducción de medios basada en el tiempo, use image-gallery-and-lightbox-system.

Entradas

1. Tipo de medio y relación de aspecto: Formato de audio vs. video, relaciones de aspecto nativas (16:9 panorámico, 9:16 video vertical, 1:1 cuadrado o altura de audio flexible).
2. Requisitos de densidad de control: Controles multimedia requeridos (ej., Reproducir/Pausa, Desplazador de línea de tiempo, Hora actual/Duración, Volumen, Velocidad de reproducción, CC/Subtítulos, Selector de calidad, PiP, Pantalla completa, Salto de 10 s).
3. Tokens de tema y marca: Tokens de color para fondos de superposición de barras de control, aspectos destacados de reproducción de marca primaria, barras de progreso del desplazador, anillos de enfoque y tipografía (de accessible-color-system, focus-indicator-design-system y fluid-typography-system).
4. Contexto del contenedor de diseño: Entorno de colocación (tarjeta integrada, sección hero de ancho completo, dock anclado persistente en la parte inferior, diálogo de superposición modal).

Salidas

1. Contenedor de diseño espacial y relación de aspecto: Arquitectura CSS que establece un encuadre responsivo, preservación de la relación de aspecto y contextos de apilamiento de superposición.
2. Plano de jerarquía de la barra de control: Diseño espacial visual para barras de herramientas de control multimedia (controles de reproducción a la izquierda, desplazador de línea de tiempo central, controles secundarios/pantalla completa a la derecha).
3. Especificación del desplazador de línea de tiempo y deslizador de volumen: Controles de rango accesibles con información sobre herramientas de vista previa de tiempo al pasar el cursor, indicadores de búfer cargado y rellenos de progreso visual.
4. Transición de anclaje de imagen en imagen: Reglas responsivas para colapsar reproductores de video en minireproductores flotantes en la esquina inferior cuando los usuarios se desplazan más allá del contenedor principal del viewport.
5. Mapeo de navegación ARIA y teclado accesible: Especificación completa de atajos de teclado (Espacio, K, J, L, M, F, C, teclas de flecha), anunciadores de estado de región activa ARIA y cumplimiento de contraste WCAG AA.

---

Flujo de trabajo

1. Establecer el contenedor espacial y el marco de relación de aspecto

Estructurar el contenedor base para evitar cambios de diseño (CLS) mientras se carga el medio:

• Caja de relación de aspecto: Envolver elementos de video en un contenedor usando la relación de aspecto CSS (aspect-ratio: 16 / 9; width: 100%; position: relative; background: #000; border-radius: 8px; overflow: hidden;).
• Apilamiento de capas de medios:
  • z-index: 1: Elemento multimedia <video> o <canvas> nativo que llena el contenedor (width: 100%; height: 100%; object-fit: contain;).
  • z-index: 2: Superposición de degradado oscuro que protege la legibilidad de la barra de control (background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 100%); pointer-events: none;).
  • z-index: 3: Botón grande de reproducción/pausa central o estado de carga esqueleto.
  • z-index: 4: Contenedor de la barra de herramientas de la barra de control inferior (y superior opcional).

2. Diseñar el disparador de reproducción grande central y los estados de carga

Proporcionar elementos visuales destacados para la interacción inicial de reproducción:

• Botón grande de reproducción superpuesto: Colocar un botón circular prominente de 64x64px (escritorio) o 56x56px (móvil) en el centro visual exacto (top: 50%; left: 50%; transform: translate(-50%, -50%);).
  • Estilo: background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #FFFFFF;.
  • Hover/Foco: scale(1.1); background: var(--brand-primary); border-color: transparent;.
  • Comportamiento: Se desvanece (opacity: 0; pointer-events: none; transition: opacity 0.25s ease;) una vez que comienza la reproducción, reaparece al pausar.
• Spinner de carga / almacenamiento en búfer: Mostrar un spinner indeterminado circular de alto contraste superpuesto centrado sobre el lienzo de video cuando el búfer de medios cae por debajo del umbral de reproducción.

3. Construir la jerarquía de la barra de control inferior

Organizar los controles en un diseño flexible limpio de 3 partes anclado en la parte inferior del marco de medios:

• Posicionamiento del contenedor: position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; z-index: 4;.
• Fila principal del desplazador (Fila 1): Colocar el desplazador de línea de tiempo interactivo a lo ancho de la parte superior de la barra de control o en línea en diseños horizontales.
• Fila de acciones de la barra de control (Fila 2):
  • Grupo izquierdo (Reproducción y Volumen):
    1. Botón Reproducir/Pausa: Botón de icono de 40x40px (aria-label="Reproducir" / aria-label="Pausa").
    2. Saltar hacia atrás/adelante (Opcional): Botones de 36x36px para "Saltar atrás 10 s" / "Saltar adelante 10 s".
    3. Grupo de volumen: Botón de icono de alternar silencio + deslizador de rango expandible al pasar el cursor/foco (width: 0 -> 80px transición suave) o deslizador persistente.
    4. Visualización de hora: Contador de texto 02:14 / 10:45 usando números monoespaciados (font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: #FFFFFF;).
  • Grupo derecho (Configuración y modos de pantalla):
    1. Alternar subtítulos (CC): Botón de icono con distintivo activo visual cuando está activo (border-bottom: 2px solid var(--brand-primary)).
    2. Disparador del menú de velocidad de reproducción: Botón desplegable o popover que muestra la velocidad activa (ej., 1.0x, 1.5x, 2.0x).
    3. Disparador de imagen en imagen (PiP): Botón de icono para iniciar el modo PiP del navegador.
    4. Alternar pantalla completa: Botón de icono para alternar la pantalla completa/ventana completa (aria-label="Entrar en pantalla completa" / aria-label="Salir de pantalla completa").

4. Construir el desplazador de línea de tiempo y el deslizador de volumen accesibles

Los desplazadores de línea de tiempo deben ser completamente táctiles, precisos y accesibles mediante teclado:

• Arquitectura de entrada de rango: Usar <input type="range" min="0" max="100" step="0.1"> o un deslizador ARIA personalizado (role="slider", aria-valuemin="0", aria-valuemax="100", aria-valuenow="23", aria-valuetext="2 minutos 14 segundos de 10 minutos 45 segundos").
• Capas de pista:
  1. Pista de fondo: Pista gris base (height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px;). Expandir pista a 8px de altura al pasar el cursor/foco.
  2. Barra de búfer: Barra secundaria que muestra el búfer de video precargado (background: rgba(255,255,255,0.5);).
  3. Barra de progreso reproducido: Barra de color primario vibrante que muestra el progreso reproducido (background: var(--brand-primary, #3B82F6);).
  4. Pomo del desplazador: Mango de pomo circular de 14x14px (background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.4);). Expandir a 18x18px al pasar el cursor/arrastrar.
• Información sobre herramientas de vista previa de tiempo al pasar el cursor: Mostrar un cuadro de marca de tiempo flotante (background: #000; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;) posicionado sobre la ubicación del cursor a lo largo de la pista del desplazador.

5. Implementar imagen en imagen (PiP) y anclaje flotante impulsado por desplazamiento

Evitar la pérdida de contexto de video cuando los usuarios se desplazan hacia abajo en artículos largos o páginas de productos:

• Observador de desplazamiento (IntersectionObserver): Rastrear cuando el contenedor de medios principal se desplaza fuera del umbral del viewport activo (<20% visible).
• Estado de minireproductor flotante:
  • Transicionar el reproductor a un dock de esquina fija flotante (position: fixed; bottom: 24px; right: 24px; width: 320px; aspect-ratio: 16/9; z-index: 1000; box-shadow: var(--shadow-xl); border-radius: 12px; border: 1px solid var(--border-subtle); animation: slideInUp 0.3s ease;).
  • Agregar un botón de cerrar/expandir en la esquina superior derecha del minireproductor (aria-label="Descartar reproductor anclado" / aria-label="Volver a la posición del video").
  • Simplificar la barra de control en modo anclado a los disparadores principales Reproducir/Pausa, Cerrar y Silenciar.

6. Implementar atajos de teclado y accesibilidad ARIA

Asegurar el control completo del teclado sin requerir interacciones de mouse o puntero:

• Atajos de teclado globales / enfocados:
  • Espacio o K: Alternar Reproducir/Pausa.
  • J: Retroceder 10 segundos.
  • L: Avanzar rápido 10 segundos.
  • Flecha izquierda / Flecha derecha: Retroceder / Avanzar rápido 5 segundos.
  • Flecha arriba / Flecha abajo: Aumentar / Disminuir volumen en un 10%.
  • M: Alternar Silencio/Activar sonido.
  • F: Alternar modo de pantalla completa.
  • C: Activar/desactivar subtítulos.
  • 0 a 9: Buscar del 0% al 90% de la duración total del video.
• Anuncios de estado del lector de pantalla:
  • Enviar actualizaciones de estado a una región invisible aria-live="polite" (ej., "Pausado en 2 minutos 14 segundos", "Volumen establecido al 80%", "Subtítulos activados").

---

Reglas de decisión

Configuraciones de diseño de la barra de control de medios

Tipo de medio y ubicación	Patrón espacial de la barra de control	Controles clave recomendados
Video Hero / Video de curso (>640px)	Barra de superposición flotante completa	Controles completos: Gran reproducción central, desplazador completo, hora, volumen, CC, velocidad, PiP, pantalla completa.
Tarjeta de video integrada compacta (<480px)	Barra flotante condensada	Controles esenciales: Reproducir/Pausa, Desplazador integrado, Hora, Alternar silencio, Pantalla completa.
Dock de audio inferior persistente (Global)	Barra de 3 columnas anclada	Izquierda: Información de pista (miniatura + título); Centro: Reproducir/Pausar + Saltar 10 s + Desplazador; Derecha: Volumen + Lista de reproducción.
Tarjeta de podcast de audio integrada	Caja horizontal integrada	Botón circular Reproducir/Pausar, Título de pista + desplazador de progreso, Hora actual/duración total, Menú de velocidad.

Estrategia de ocultación automática de superposición de video

• Al reproducir: Ocultar automáticamente la barra de control superpuesta después de 2.5 segundos de inactividad del puntero dentro del lienzo de video (opacity: 0; cursor: none; transition: opacity 0.3s ease;).
• Al pausar o enfocar: Mantener la barra de control permanentemente visible (opacity: 1) para que los controles permanezcan inmediatamente accesibles.
• Al enfocar con teclado: Siempre que el foco del teclado entre en cualquier botón de control dentro del reproductor, mantener los controles visibles inmediatamente (:focus-within { opacity: 1; }).

---

Restricciones

• Accesibilidad (WCAG 2.1 AA):
  • SC 1.2.2 Subtítulos (Pregrabados): Se debe proporcionar un botón de subtítulos para medios de video sincronizados con audio y voz.
  • SC 1.4.3 Contraste (Mínimo): Los iconos de control, los contadores de texto y las pistas de progreso del desplazador deben mantener al menos 4.5:1 de contraste con los fondos de superposición de control.
  • SC 2.1.1 Teclado: Cada función del reproductor (reproducir, pausar, buscar, volumen, CC, velocidad, pantalla completa) debe ser completamente accesible mediante la navegación con teclado.
  • SC 2.4.7 Foco visible: Los botones de control del reproductor enfocados deben mostrar un indicador de foco de alto contraste sin recortar (outline: 2px solid #FFFFFF; outline-offset: 2px;).
  • SC 2.5.8 Tamaño del objetivo: Los botones de control interactivos y los pomos del deslizador deben proporcionar un objetivo táctil mínimo de 24x24px (mínimo 44x44px para viewports táctiles/móviles).
• Prevención de cambios de diseño: El envoltorio de relación de aspecto debe declararse con aspect-ratio CSS o trucos de padding-top para evitar recálculos de diseño de página durante la carga del video.
• Ergonomía de gestos táctiles: El doble toque en las zonas izquierda/derecha del lienzo de video en dispositivos táctiles móviles debe activar un salto hacia atrás/adelante de 10 segundos con retroalimentación de ondas visible.

---

Patrones de fallo comunes

• Envoltorios personalizados nativos inaccesibles: Ocultar los controles nativos del navegador y no proporcionar atajos de teclado o atributos ARIA en botones <div> HTML personalizados, bloqueando completamente a los usuarios de teclado y lectores de pantalla.
• Controles superpuestos parpadeantes: Ocultar las barras de control inmediatamente sin demora o transición mientras el mouse se mueve activamente cerca del deslizador de desplazamiento.
• Escalado de pantalla completa sin restricciones: No mantener la relación de aspecto adecuada en el modo de pantalla completa, lo que resulta en proporciones de video estiradas o distorsionadas.
• Controles de bajo contraste sobre fotogramas de video claros: Renderizar iconos de control blancos simples sin una superposición de degradado oscuro subyacente (rgba(0,0,0,0.7)), lo que hace que los controles sean invisibles sobre fondos de video claros.
• Comportamiento inconsistente del anclaje de PiP: Activar el anclaje de imagen en imagen antes de que el reproductor esté fuera del viewport o desactivarlo incorrectamente al volver a la vista.
• Falta de mensajes de estado para lectores de pantalla: Omitir las regiones aria-live para anunciar cambios de reproducción, lo que hace que el reproductor sea inaccesible para usuarios con discapacidad visual.

---

Dependencias de integración

• accessible-color-system: Proporciona pares de contraste de primer plano/fondo de la barra de control y tokens de color de acento de marca que cumplen con AAA.
• focus-indicator-design-system: Proporciona patrones de anillo de foco, grosor, desplazamiento y color para todos los botones de control y controles de rango.
• fluid-typography-system: Proporciona escalas de tamaño de fuente responsivas, alturas de línea y familias de fuentes (incluyendo números monoespaciados) para contadores de tiempo y etiquetas de información sobre herramientas.
• interface-motion-system: Proporciona duraciones de transición (--transition-fast, --transition-normal), funciones de temporización (ease, ease-out) y animaciones @keyframes predefinidas (como slideInUp para la animación de anclaje flotante de PiP).