Guía con Videos Locales

Guía: Videos Locales en la Documentación

Aprende a incluir videos alojados directamente en el proyecto.

¿Cuándo usar videos locales?

Usa videos locales cuando:

El contenido es privado o confidencial
Quieres control total sobre el archivo
No dependes de servicios externos (YouTube, Vimeo)
El video es específico de tu documentación interna

Ubicación de archivos

Coloca tus videos en la carpeta public/videos/:

public/videos/
├── tutorial-introduccion.mp4
├── demo-funcionalidad.mp4
├── demo-funcionalidad.webm
└── tutorial-avanzado.mp4

Método 1: Video HTML5 básico

Código:

<video controls width="100%" style="max-width: 800px;">
  <source src="/videos/tutorial-introduccion.mp4" type="video/mp4">
  Tu navegador no soporta el tag de video.
</video>

Método 2: Video con múltiples formatos

Proporciona varios formatos para máxima compatibilidad:

<video controls width="100%" style="max-width: 800px;">
  <source src="/videos/demo-funcionalidad.webm" type="video/webm">
  <source src="/videos/demo-funcionalidad.mp4" type="video/mp4">
  Tu navegador no soporta el tag de video.
</video>

Método 3: Video con poster (thumbnail)

Muestra una imagen previa antes de reproducir:

<video controls poster="/images/video-thumbnail.jpg" width="100%" style="max-width: 800px;">
  <source src="/videos/tutorial-avanzado.mp4" type="video/mp4">
  Tu navegador no soporta el tag de video.
</video>

Ventajas del poster:

El usuario ve una vista previa del contenido
Mejor experiencia visual antes de cargar
Puedes crear thumbnails personalizados

Opciones avanzadas

Autoplay (solo con muted)

<video autoplay muted loop width="100%" style="max-width: 600px;">
  <source src="/videos/background-loop.mp4" type="video/mp4">
</video>

Video sin controles (decorativo)

<video autoplay muted loop playsinline width="100%">
  <source src="/videos/animacion-fondo.mp4" type="video/mp4">
</video>

Controles personalizados con JavaScript

<video id="miVideo" width="100%" style="max-width: 800px;">
  <source src="/videos/tutorial.mp4" type="video/mp4">
</video>

<div class="controles-video" style="margin-top: 10px;">
  <button onclick="document.getElementById('miVideo').play()">▶ Play</button>
  <button onclick="document.getElementById('miVideo').pause()">⏸ Pause</button>
  <button onclick="document.getElementById('miVideo').currentTime = 0">⏮ Reiniciar</button>
</div>

Atributos útiles del tag `<video>`

Atributo	Descripción	Ejemplo
`controls`	Muestra controles de reproducción	`<video controls>`
`autoplay`	Reproduce automáticamente (requiere `muted`)	`<video autoplay muted>`
`loop`	Reproduce en bucle continuo	`<video loop>`
`muted`	Sin audio	`<video muted>`
`poster`	Imagen previa (thumbnail)	`<video poster="/img.jpg">`
`preload`	Cómo precargar: `none`, `metadata`, `auto`	`<video preload="metadata">`
`width` / `height`	Dimensiones del video	`<video width="800">`
`playsinline`	Reproduce inline en móviles (iOS)	`<video playsinline>`

Preparar tus videos

Formatos recomendados

MP4 (H.264)

✅ Soportado universalmente
✅ Buena compresión
❌ Compresión inferior a WebM

WebM (VP9)

✅ Excelente compresión
✅ Código abierto
❌ No soportado en Safari antiguo

Recomendación: Proporciona ambos formatos para mejor compatibilidad.

Resoluciones recomendadas

Uso	Resolución	Descripción
Tutorial detallado	1920x1080 (Full HD)	Captura de pantalla completa
Demo funcionalidad	1280x720 (HD)	Balance calidad/tamaño
Clip corto	854x480 (SD)	Ligero, carga rápida

Configuración de codificación

Con FFmpeg (herramienta de línea de comandos):

Convertir a MP4 optimizado:

ffmpeg -i input.mov -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k output.mp4

libx264: Códec H.264
preset slow: Mayor compresión (más lento)
crf 22: Calidad (18=excelente, 28=aceptable)
aac -b:a 128k: Audio AAC a 128kbps

Convertir a WebM optimizado:

ffmpeg -i input.mov -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus -b:a 96k output.webm

Reducir tamaño de video existente:

ffmpeg -i input.mp4 -vf scale=1280:-1 -c:v libx264 -crf 28 output.mp4

Herramientas de compresión GUI

Windows:

HandBrake - Gratis, muy potente
Shotcut - Editor + exportador

macOS:

HandBrake
Compressor - Parte de Final Cut Pro

Online:

Mejores prácticas

Tamaño de archivo

Duración

Tutorial corto: 1-3 minutos
Demo completa: 3-5 minutos
Curso completo: Divide en clips de 5 minutos máximo

Accesibilidad

<video controls width="100%">
  <source src="/videos/tutorial.mp4" type="video/mp4">
  <track src="/videos/tutorial-es.vtt" kind="subtitles" srclang="es" label="Español">
  <track src="/videos/tutorial-en.vtt" kind="subtitles" srclang="en" label="English">
  Tu navegador no soporta el tag de video.
</video>

Ejemplo completo: Tutorial paso a paso

Configuración inicial del sistema

Antes de comenzar, asegúrate de tener acceso de administrador.

Este video muestra:

Acceder al panel de administración (0:00-0:30)
Configurar parámetros básicos (0:30-1:15)
Guardar y aplicar cambios (1:15-1:30)

Comparativa: Video local vs YouTube

Aspecto	Video local	YouTube
Control	Total	Limitado
Privacidad	100% privado	Público/No listado
Carga del servidor	Consume tu bandwidth	Gratis, YouTube lo sirve
Disponibilidad	Siempre (si tu server funciona)	Depende de YouTube
Analytics	Necesitas implementar	Incluido
Subtítulos	Manual (WebVTT)	Auto-generados disponibles
SEO	No indexable separadamente	Indexable en YouTube/Google

Solución de problemas

El video no se reproduce

Verifica la ruta del archivo: /videos/nombre.mp4 (sin public/)
Verifica que el archivo esté en public/videos/
Prueba con otro navegador
Revisa la consola del navegador para errores

El video es muy lento

Reduce la resolución del video
Aumenta la compresión (CRF más alto)
Usa formato WebM además de MP4
Considera usar un CDN para servir videos grandes

El video no tiene controles en móvil

Agrega el atributo playsinline:

<video controls playsinline>
  <source src="/videos/tutorial.mp4" type="video/mp4">
</video>