Vibes Website

Una página web para mostrar vídeos a pantalla completa con música de fondo y transiciones suaves.

🎯 Características

• ✅ Vídeos a tamaño completo con reproducción automática
• ✅ Transiciones suaves entre vídeos (2 segundos de fade)
• ✅ Música de fondo en bucle
• ✅ Vídeos aleatorios sin repetir hasta que se agoten todos
• ✅ Sistema de configuración para asociar músicas con vídeos
• ✅ Interfaz de control minimalista

📁 Estructura de archivos

VibesWebsite/
├── index.html          # Página principal
├── styles.css          # Estilos
├── script.js           # Lógica de la aplicación
├── config.json         # Configuración de música y vídeos
├── music/              # Carpeta para archivos de música
│   ├── cancion1.mp3
│   ├── cancion2.mp3
│   └── ...
└── videos/             # Carpeta para vídeos organizados por categorías
    ├── City at night/
    │   ├── video1.mp4
    │   ├── video2.mp4
    │   └── ...
    └── Naturaleza/
        ├── video1.mp4
        └── ...

⚙️ Configuración (config.json)

El archivo config.json es donde defines qué vídeos se muestran con cada canción:

{
  "playlist": [
    {
      "name": "Nombre de la canción",
      "music": "music/cancion1.mp3",
      "videos": [
        "videos/City at night/video1.mp4",
        "videos/City at night/video2.mp4"
      ]
    }
  ]
}

Campos:

• name: Nombre descriptivo de la canción (opcional)
• music: Ruta al archivo de música
• videos: Array con las rutas de los vídeos asociados a esta canción

🚀 Cómo usar

1. Añade tus archivos multimedia:

   • Coloca tus canciones en la carpeta music/
   • Organiza tus vídeos en carpetas dentro de videos/

2. Edita config.json:

   • Añade entradas en el array playlist
   • Asocia cada canción con sus vídeos correspondientes

3. Abre la página:

   • Abre index.html en un navegador web
   • Click en "▶ Iniciar" para comenzar

🎮 Controles

• ▶ Iniciar: Comienza la reproducción
• 🔊 Silenciar: Activa/desactiva el audio
• Info: Muestra la canción y vídeo actuales

🔄 Funcionamiento

1. Los vídeos se reproducen aleatoriamente sin repetirse hasta agotar todos los de la canción actual
2. Cuando termina una canción, pasa automáticamente a la siguiente en la playlist
3. Las transiciones entre vídeos son suaves (2 segundos de crossfade)
4. El siguiente vídeo se precarga mientras se reproduce el actual para transiciones sin cortes

📝 Notas técnicas

• La transición suave se logra usando dos elementos <video> que se alternan
• El tiempo de transición es de 2 segundos (configurable en CSS: .video-player)
• Los vídeos se silencian automáticamente (solo suena la música de fondo)
• Compatible con formatos: MP4, WebM, OGG (vídeo) y MP3, WAV, OGG (audio)

🛠️ Personalización

Cambiar duración de la transición:

Edita en styles.css:

.video-player {
    transition: opacity 2s ease-in-out; /* Cambia "2s" */
}

Y en script.js (línea ~134):

setTimeout(() => {
    // ...
}, 2000); // Cambia "2000" (en milisegundos)

Modificar la interfaz:

Todos los estilos están en styles.css y son fácilmente personalizables.

⚠️ Importante

• Los navegadores requieren interacción del usuario para reproducir audio/vídeo (por eso el botón "Iniciar")
• Asegúrate de que las rutas en config.json coincidan con tus archivos
• Para producción, usa un servidor web local (no abrir directamente el HTML por restricciones CORS)

🌐 Servidor local (opcional)

Si tienes problemas con CORS, ejecuta un servidor local:

Python 3:

python -m http.server 8000

Node.js:

npx http-server -p 8000

Luego abre: http://localhost:8000