Script de macOS de un solo clic para convertir MP4 en animaciones de bucle estilo GIF WebP

Para el trabajo de desarrollo de aplicaciones y clientes, a menudo necesito Visualizar contenido de vídeo rápidamente:

• animaciones de vista previa para gerentes de producto
• clips de demostración para documentos o PRD
• Movimiento ligero para publicaciones en redes sociales o páginas de destino.

En estos casos, Extraer algunos fotogramas clave de un MP4 y convertirlos en una animación WebP en bucle suele ser suficiente y mucho más ligero que subir un vídeo completo.

Este artículo comparte una script de shell de un solo clic para macOS eso:

• Extrae entre 6 y 12 fotogramas espaciados uniformemente de un MP4
• los redimensiona a 720 px de ancho
• crea una animación WebP en bucle
• y se instala automáticamente ffmpeg Si falta

Todo esto se ejecuta desde un único comando en la Terminal.

1. Qué hace el script

En macOS, el script extraer_fotogramas_pares_webp.sh proporciona:

1. Automático ffmpeg detección e instalación
   • Comprueba si ffmpeg está disponible
   • En caso contrario, instala Homebrew (si es necesario) y luego instala ffmpeg
2. Extracción uniforme de fotogramas
   • Calcula la duración del vídeo
   • Muestreos uniformes 6–12 cuadros a lo largo de todo el clip
   • El valor predeterminado es 6 cuadros, pero puedes personalizar el número.
3. Generación de animaciones WebP
   • Combina los fotogramas PNG extraídos en un bucle WebP
   • El ancho de salida es 720 píxeles por defecto (la altura se escala proporcionalmente)
   • La calidad se puede ajustar mediante -q:v
4. Limpieza automática
   • Almacena marcos intermedios en un directorio temporal
   • Elimina el directorio temporal después de generar el WebP
5. Funciona con vídeos cortos y largos.
   • Si el vídeo es muy corto, el número de fotogramas se reduce automáticamente.
   • Para videos más largos, los fotogramas siempre están espaciados de manera uniforme a lo largo de toda la duración.

2. Cómo funciona bajo el capó

Aquí está la lógica básica detrás del guión.

2.1 Comprobar dependencias

El script primero comprueba si ffmpeg está instalado:

• Usos comando -v ffmpeg
• Si no lo encuentra, lo busca. elaborar cerveza
  • Si falta Homebrew, lo instala
  • Luego usa brew install ffmpeg Para instalar ffmpeg

2.2 Recuperar la duración del vídeo

Usando sonda ff, el guión lee el duración total del vídeo en segundos.
En base a esto y al número de cuadros deseado, calcula el intervalo de tiempo entre cuadros.

2.3 Muestrear fotogramas de manera uniforme

Para cada índice de cuadro, se realiza lo siguiente:

• Calcula la marca de tiempo = índice × intervalo
• Usos ffmpeg-ss para saltar a esa posición temporal
• Extrae exactamente un fotograma
• Lo escala con escala=720:-1 Entonces el ancho es 720px y la altura es proporcional

2.4 Construir la animación WebP

Una vez que todos los fotogramas se guardan como PNG, el script llama ffmpeg de nuevo a:

• Léelos en orden (%03d.png)
• Codificarlos como un WebP animado
• Colocar -bucle 0 Así que la animación se repite indefinidamente.
• Control de calidad con -q:v 70 (menor = mayor calidad, archivo más grande)

2.5 Limpieza

Todos los archivos PNG intermedios se almacenan en un directorio temporal creado por mktemp-d.
Una vez generado el WebP, ese directorio se elimina con rm-rf.

3. Script de shell completo: extract_even_frames_webp.sh

Puedes guardar el siguiente script como extraer_fotogramas_pares_webp.sh en tu Mac:

#!/bin/bash

# Usage: ./extract_even_frames_webp.sh input.mp4 output.webp [frames]
# frames is optional, default 6, maximum 12

INPUT="$1"
OUTPUT="$2"
FRAMES="${3:-6}"

# Cap maximum frames at 12
if [ "$FRAMES" -gt 12 ]; then
    FRAMES=12
fi

if [ -z "$INPUT" ] || [ -z "$OUTPUT" ]; then
    echo "Usage: $0 input.mp4 output.webp [frames]"
    exit 1
fi

# ---------------------------------
# 1️⃣ Check ffmpeg
# ---------------------------------
if ! command -v ffmpeg >/dev/null 2>&1; then
    echo "⚠️ ffmpeg not found, starting installation..."
    if ! command -v brew >/dev/null 2>&1; then
        echo "⚠️ Homebrew not found, installing Homebrew..."
        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
        echo "✅ Homebrew installed"
    else
        echo "✅ Homebrew already installed"
    fi
    brew update
    brew install ffmpeg
    if ! command -v ffmpeg >/dev/null 2>&1; then
        echo "❌ ffmpeg installation failed, please check manually"
        exit 1
    fi
    echo "🎉 ffmpeg installed successfully!"
else
    echo "✅ ffmpeg is already installed"
fi

# ---------------------------------
# 2️⃣ Get video duration
# ---------------------------------
DURATION=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$INPUT")
if [[ -z "$DURATION" ]]; then
    echo "❌ Failed to get video duration"
    exit 1
fi
DURATION=${DURATION%.*}  # integer seconds

# If video is shorter than requested frames, match frame count to duration
if [ "$DURATION" -lt "$FRAMES" ]; then
    FRAMES=$DURATION
fi

echo "📹 Video length: ${DURATION}s, extracting $FRAMES frames evenly"

# ---------------------------------
# 3️⃣ Create temporary directory
# ---------------------------------
TMPDIR=$(mktemp -d)

# ---------------------------------
# 4️⃣ Calculate interval
# ---------------------------------
INTERVAL=$(echo "scale=6; $DURATION/$FRAMES" | bc)
echo "⏱ Frame interval: $INTERVAL seconds"

# ---------------------------------
# 5️⃣ Extract frames
# ---------------------------------
for i in $(seq 0 $(($FRAMES-1))); do
    TIME=$(echo "$i * $INTERVAL" | bc)
    printf -v FILENAME "%03d.png" $((i+1))
    ffmpeg -ss "$TIME" -i "$INPUT" -frames:v 1 -vf "scale=720:-1" \
        "$TMPDIR/$FILENAME" -hide_banner -loglevel error
done

# ---------------------------------
# 6️⃣ Generate animated WebP
# ---------------------------------
ffmpeg -y -i "$TMPDIR/%03d.png" -vcodec libwebp -lossless 0 -q:v 70 \
    -loop 0 -preset picture "$OUTPUT" -hide_banner -loglevel error

# ---------------------------------
# 7️⃣ Clean up
# ---------------------------------
rm -rf "$TMPDIR"

echo "🎉 Done! Generated file: $OUTPUT"

4. Cómo usar el script en macOS

1. Guardar el script Guarde el contenido anterior como extraer_fotogramas_pares_webp.sh, por ejemplo, en su directorio de inicio.
2. Dale permiso de ejecución

chmod +x extraer_fotogramas_pares_webp.sh

3. Uso básico

./extract_even_frames_webp.sh entrada.mp4 salida.webp

Esto hará lo siguiente:

• Comprobar o instalar ffmpeg
• Extraer 6 fotogramas espaciados uniformemente
• Generar salida.webp con un ancho de 720 px

4. Especifique el número de fotogramas (6–12)

./extract_even_frames_webp.sh entrada.mp4 salida.webp 8

Esto extraerá 8 fotogramas en lugar de los 6 predeterminados.

5. ¿Por qué es útil este flujo de trabajo?

En comparación con abrir manualmente un editor de video o hacer clic en un convertidor GUI, este script tiene algunas ventajas:

1. Configuración manual cero
   • Se instala automáticamente ffmpeg (y Homebrew si es necesario)
   • No es necesario buscar instaladores ni recordar comandos
2. Muestreo de cuadros inteligentes
   • Para clips cortos, reduce automáticamente el número de fotogramas.
   • Para videos más largos, los fotogramas siempre están espaciados uniformemente a lo largo de la duración.
3. Control de calidad y tamaño
   • -q:v Le permite ajustar la calidad de WebP en función del tamaño del archivo
   • escala=720:-1 Proporciona un ancho compatible con la web y una relación de aspecto consistente.
4. Bucle por defecto
   • -bucle 0 hace que la animación WebP se repita para siempre
   • Ideal para vistas previas, demostraciones y movimientos sutiles en documentos o sitios.
5. Uso limpio del disco
   • Los marcos PNG temporales se almacenan en una carpeta temporal y se eliminan después
   • No hay archivos sobrantes que se acumulen con el tiempo

6. Ejemplo: convertir un MP4 de 20 segundos en una vista previa WebP

Imagina que tienes una Vídeo de demostración de funciones de 20 segundos y corre:

./extract_even_frames_webp.sh demo.mp4 demo-preview.webp 6

El guión hará lo siguiente:

• Calcular un intervalo de aproximadamente 3,33 segundos
• Extraer 6 fotogramas en 0 s, 3,33 s, 6,66 s, 10 s, 13,33 s, 16,66 s
• Redimensionarlos a un ancho de 720 px
• Construir una bucle WebP animación

Luego puedes colocar este WebP en:

• Documentos de producto o documentos Feishu/Notion como vista previa ligera
• Publicaciones sociales o páginas de destino como miniatura de movimiento de reproducción automática
• Presentaciones PPT y demostraciones internas donde un video completo sería excesivo

7. Ideas para la ampliación

Este script es un punto de partida; puedes adaptarlo fácilmente a tu propio flujo de trabajo:

1. Recuento dinámico de fotogramas
   • Elija automáticamente entre 6 y 12 fotogramas según la duración del vídeo
   • Por ejemplo, más cuadros para clips más largos para mostrar más estados.
2. Tamaños personalizados
   • Cambiar escala=720:-1 a cualquier ancho que prefiera su equipo de producto
   • O exponer el ancho como parámetro: ./script.sh entrada.mp4 salida.webp 8 1080
3. Procesamiento por lotes
   • Envuelva este script en otro bucle para procesar todo .mp4 archivos en una carpeta
   • Útil cuando se exporta un lote de demostraciones de funciones a la vez

Nota del autor

Este script proviene de mi flujo de trabajo real de desarrollo en macOS para convertir vídeos MP4 en vistas previas WebP ligeras. Lo uso en el desarrollo diario de clientes para generar animaciones de demostración para documentos y publicaciones en redes sociales. GPT solo se utilizó para traducir, estructurar y pulir la versión en inglés de este artículo; la lógica del script, los detalles de implementación y los patrones de uso provienen de mi propia experiencia en proyectos.

Acerca del autor

qinshengping

Soy Sam Qin, desarrollador de aplicaciones móviles y de clientes, enfocado en crear experiencias fluidas y estables en plataformas de aplicaciones y frontend. Trabajo en el ajuste del rendimiento, la reducción de fallos y en lograr que funciones complejas se sientan sencillas y rápidas para usuarios reales. En el Centro de Conocimiento, comparto notas de depuración, prácticas de arquitectura del lado del cliente y consejos prácticos de proyectos reales, incluyendo cómo uso herramientas e IA para lanzar mejores versiones con menos sorpresas.

Ver las publicaciones del autor