Convertir un GIF animado a video en formato WebP y MP4 con FFmpeg

FFmpeg es una herramienta de código abierto y gratis, que permite convertir archivos multimedia entre diferentes formatos.
En otro artículo puedes leer como convertir videos con ella.
En este solo comparto par de códigos, para poder convertir rápidamente un Gif animado a video, de forma tal que se puede insertar en páginas, sin afectar su rendimiento.
En necesario para garantizar su compatibilidad con los distintos navegadores, convertir el archivo a dos formatos: WebP y MP4 y luego usar la etiqueta XXX de HTML5, para insertarlos en las páginas.

Convertir un Gif a WebP y MP4 con FFmpeg

Si aún no tienes la herramienta, descarga FFmpeg para Windows y descomprime el archivo en una carpeta.
Abre una ventana del Símbolo del sistema o de la nueva Terminal de Windows.
Para eso sin salir del directorio, da un clic en la barra de direcciones, introduce CMD (para el Símbolo del sistema) o WT (para la Terminal de Windows) y presiona Enter.
Introduce o pega la siguiente instrucción para convertir un archivo de nombre "animación.gif" a uno llamado "animación.webm"

ffmpeg -i animación.gif -c vp9 -b:v 0 -crf 41 animación.webm

Introduce o pega la siguiente instrucción para convertir un archivo de nombre "animación.gif" a uno llamado "animación.mp4"

ffmpeg -i animación.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p animación.mp4

Insertar el video en formato WebP y MP4 en el HTML

<video autoplay loop muted playsinline>
  <source src="animación.webm" type="video/webm">
  <source src="animación.mp4" type="video/mp4">
</video>

Elimina los parametros "autoplay loop muted playsinline", a tu conveniencia.
A continuación un ejemplo de un gif animado convertido e insertado en esta página.

Convertir video WebP a MP4 con FFmpeg

ffmpeg -i video.webm -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p video.mp4

Error al reproducir videos MP4 en el navegador Safari (iPhone o iPad)

Para que se reproduzcan los videos en formato MP4 en los dispositivos de Apple, iPhone o iPad, los videos no pueden estar comprimidos con Gzip, como es habitual en muchos servidores de internet, para reducir el consumo de ancho de banda.
Este error se puede solucionar fácilmente situando en el directorio donde se alojan los archivos de video, un archivo htaccess con las instrucciones para evitar que el servidor los comprima.
Para eso usa el siguiente código en un archivo htaccess:

RewriteOptions inherit
RewriteEngine On

RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=dont-vary:1]

Se puede comprobar fácilmente esta funcionalidad si se carga esta pagina desde uno de estos dispositivos. El archivo de video insertado anteriormente no se verá, pero sí el que inserto a continuación.

Páginas relacionadas



Comparte

Sígueme en las redes sociales