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

Surface in‑progress items based on local resume data

12 Sep 2025 - 22 days ago