Autoplay, Fullscreen, and Shortcuts

Autoplay, Fullscreen, and Shortcuts

Written by: Marlon Colca
Posted on 11 Sep 2025 - 23 days ago
nextjs typescript clones

Improve ergonomics with autoplay, best‑effort fullscreen, keyboard controls, and an optional “unmute” overlay.


Objetivo: mejorar la ergonomía con autoplay (silenciado), fullscreen y atajos de teclado.

Archivos 🗂️

  • src/hooks/useAutoFullscreen.ts: intenta requestFullscreen() al iniciar la reproducción.
  • src/components/VideoPlayer.tsx: pasa autoPlay, autoFullscreen y enlaza teclas.

Atajos (ejemplos) ⌨️

  • Espacio/K: play/pause
  • ←/→: retroceder/avanzar 5s
  • M: mute
  • F: fullscreen

Notas 📝

  • Autoplay normalmente requiere muted. El reproductor lo activa si autoPlay es true.
  • Algunos navegadores bloquean fullscreen sin gesto de usuario; el hook lo intenta y ignora errores.
  • Puedes mostrar un overlay “Toca para activar sonido” mientras está en mute.

🔜 Coming up next


Continue Watching Row

Continue Watching Row

Surface in‑progress items based on local resume data

12 Sep 2025 - 22 days ago