Video & Media

Los controles nativos del navegador ofrecen accesibilidad sin costo, pero sacrifican branding y consistencia cross-browser. Los controles custom son obligatorios cuando el sistema de diseño lo exige, pero requieren implementación explícita de ARIA, focus management y keyboard events. La regla de oro: si no puedes invertir en accesibilidad custom, usa native controls.

Un player sin estados visuales definidos genera percepción de UI rota. El usuario no distingue entre "cargando", "error de red" y "video no disponible" si todos lucen igual (pantalla negra). Cada estado necesita feedback visual y, cuando aplique, una acción de recuperación. El skeleton debe preservar el aspect-ratio para evitar CLS.

El autoplay no solicitado destruye la confianza del usuario y contamina el entorno sonoro. Solo es aceptable muted en hero videos de fondo, feeds tipo TikTok/Reels con IntersectionObserver, y videos iniciados por el usuario en otra pantalla. El autoplay con sonido está bloqueado por defecto en Chrome, Safari y Firefox desde 2018. Un video como elemento LCP impacta directamente Core Web Vitals.

Los captions son requisito legal en muchas jurisdicciones (ADA, WCAG 2.1 SC 1.2.2) y el 85% del video en redes sociales se consume sin sonido (Facebook 2016), los captions aumentan retención hasta 80%. La diferencia técnica: los captions incluyen descripción de sonidos no verbales ("Música dramática"), los subtítulos solo transcriben diálogo.

Los keyboard shortcuts son el diferenciador entre un player funcional y uno profesional. YouTube estableció el vocabulario estándar: K/Space para play/pause, J para -10s, L para +10s, F para fullscreen, M para mute. El OSD (on-screen display) de 1.5s confirma visualmente que el shortcut se registró. Interceptar keydown globalmente sin verificar foco es el anti-patrón más común.

La progress bar concentra la mayor densidad de interacción: scrubbing, seek por click, preview de contenido y navegación por capítulos. El error más común es implementarla como input[type=range] sin customización, cuya apariencia varía radicalmente entre navegadores. Un hit área de 44px es obligatorio para uso táctil aunque la barra visual sea de 4px. El thumbnail preview convierte la exploración de contenido de lineal a espacial.

Exponer los controles de velocidad y calidad directamente en la toolbar destruye el espacio en mobile y crea ruido visual en desktop. El patrón correcto (YouTube, Vimeo, Mux) es un único botón de engrane que despliega un panel con secciones. La persistencia de preferencias vía localStorage es fundamental: el usuario que siempre escucha a 1.5x no debería configurarlo en cada sesión.

El audio player tiene un caso de uso fundamental que lo distingue del video: el usuario necesita navegar por la app mientras escucha. Usar múltiples instancias de audio[controls] o un player que se destruye al navegar convierte al reproductor en un componente decorativo. El mini-player persistente en posición fija es la solución arquitectural. La Media Sessión API expone controles nativos en lock screen y notificaciones.