Optimiza vídeo para la web en Mac

El incrustado de la página de marketing se entrecorta en móviles porque el MOV principal pesa 120 MB y carece de metadatos adecuados para la web. Los navegadores pueden reproducir muchos formatos, pero MP4 con H.264, un bitrate sensato y faststart sigue siendo la mejor opción para incrustaciones y cargas en CMS predecibles.

Las Core Web Vitals consideran que los archivos multimedia grandes suponen un riesgo de rendimiento. Un incrustado de tamaño adecuado mejora el LCP incluso cuando el resto de la página es ligero.

Qué necesita el vídeo web

La distribución web difiere de archivar un maestro o adjuntar un archivo a un correo electrónico.

Los códecs modernos como VP9 y AV1 ahorran bytes, pero añaden complejidad de codificación y necesidades de respaldo. Consulta qué son VP9 y AV1 cuando planifiques pipelines multi-códec. Para una única incrustación hoy, H.264 MP4 sigue siendo el valor práctico por defecto.

Los bucles de reproducción automática en páginas de destino deben ser cortos. Un bucle de 15 segundos a 720p suele cargar más rápido que un hero de 60 segundos a 1080p sin ganar en narrativa.

Comprime en QuickTime para la web

QuickTime Player es la ruta integrada más rápida para un solo clip:

1. Abre el MOV o MP4 original.
2. Editar → Recortar para el segmento de bucle o demostración que necesita la página.
3. Archivo → Exportar como… → 1080p para vídeo hero de escritorio, 720p para bucles de fondo.

Las exportaciones de QuickTime suelen funcionar en navegadores, pero pueden omitir la optimización faststart. Si la barra de progreso se queda en cero durante varios segundos en una conexión lenta, vuelve a multiplexar o codificar con FFmpeg a continuación.

Guarda una versión maestra de alta calidad en otro lugar. La copia web debe ser el archivo más pequeño que se lea con claridad en el tamaño de incrustación.

La reproducción automática en silencio es común en sitios de marketing. Exporta una versión sin picos de audio fuertes para que los visitantes no se sorprendan al activar el sonido.

FFmpeg H.264 MP4 con faststart

Instala FFmpeg vía Homebrew (brew install ffmpeg).

Incrustación web equilibrada:

ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart web-hero.mp4

Reduce la resolución de una grabación de pantalla en 4K para una columna de 960 px de ancho:

ffmpeg -i input.mov -vf scale=1920:-2 -c:v libx264 -crf 24 -preset medium \
  -c:a aac -b:a 96k -movflags +faststart web-1920w.mp4

¿Ya tienes un buen MP4 pero sin faststart? Vuelve a multiplexar sin re-codificar:

ffmpeg -i input.mp4 -c copy -movflags +faststart output-faststart.mp4

Bitrate y resolución para incrustaciones

Ajusta los píxeles al ancho CSS de la página, no al tamaño de captura de tu monitor.

Usa la calculadora de tamaño de archivo de vídeo para estimar si un clip cabe en el límite de tu CDN o CMS antes de la carga.

Lee qué es el bitrate de vídeo cuando las exportaciones -crf superen aún tu presupuesto. La tasa de fotogramas a 30 fps es suficiente para la mayoría de demostraciones de interfaz; 60 fps duplica los datos de fotogramas con poco beneficio en un incrustado de marketing.

Prueba la reproducción antes de publicar

Verifica en las mismas redes que usan tus visitantes.

1. Abre el MP4 en Safari y Chrome con la red limitada en las herramientas de desarrollo.
2. Confirma que la reproducción comienza en menos de un segundo en las exportaciones con faststart.
3. Comprueba los bucles de reproducción automática en silencio para ver compresión visible en los degradados.

Las imágenes poster importan para la velocidad percibida. Empareja un JPEG ligero con el MP4 para que la maquetación no salte mientras el vídeo se almacena en búfer.

La codificación es solo parte de la entrega. Asigna dimensiones intrínsecas al elemento, usa preload="metadata" para clips controlados normales, proporciona subtítulos cuando el habla tenga significado y evita la reproducción automática cuando la página funcione mejor sin movimiento. Respeta la preferencia de movimiento reducido del usuario para los bucles decorativos.

<video width="1280" height="720" controls preload="metadata" poster="demo-poster.jpg">
  <source src="product-demo.mp4" type="video/mp4">
</video>

Cuando el mismo activo también se envíe a YouTube, compara notas con optimiza vídeo para YouTube en Mac . Los incrustados web suelen tolerar bitrates ligeramente más bajos que los mezzanines de carga.

Flujos de trabajo generales de compresión: cómo comprimir vídeo en Mac .

Programa codificaciones nocturnas cuando una actualización de página de destino incluya varias variantes hero. Los preajustes de FFmpeg en un script de shell superan la exportación manual de cada bucle desde QuickTime.

Uso de GetCompress

GetCompress prepara incrustaciones MOV y MP4 localmente en tu Mac:

• Aplica los preajustes web 1080p o 720p loop a una carpeta de variantes hero.
• Recorta hasta los puntos de bucle en el reproductor de vista previa antes de exportar.
• Establece el tamaño de archivo objetivo en vídeo cuando tu CMS imponga un límite de megabytes en las cargas.
• Realiza exportaciones por lotes para páginas de destino localizadas que reutilicen el mismo diseño de movimiento.
• Mantén el metraje de producto previo al lanzamiento solo en disco durante la fase de staging.

GetCompress es una alternativa más sencilla cuando las líneas de comando de FFmpeg se multiplican para cada plantilla de página. Combínalo con preajustes de imagen cuando el mismo lanzamiento incluya capturas de pantalla PNG pesadas en el repositorio.

Carga diferida de incrustados debajo del pliegue cuando tu CMS lo soporte. El hero MP4 merece faststart, pero los clips secundarios pueden diferir la descarga hasta que el visitante haga scroll.