Convertir videos para publicar en web HTML5

Convertir videos para publicar en web HTML5

Cuando creamos un video y lo tenemos en digamos formato MOV y si lo queremos poner en un reproductor de html como MP4 directamente servido en nuestra página, probablemente no podemos ponerlo como tal sin que "pese mucho" (tamaño muy grande para su reproducción) y que se pueda ver en la mayoría de dispositivos ya sea navegadores en computadoras de escritorio o los navegadores de los móviles.

Lo más fácil es publicarlo en una red social y luego copiar el código para compartir e incrustar en nuestra página, sitios especializados como Vimeo o Youtube ofrecen esta opción de forma gratuita y fácil.

Ahora bien, si pones algún contenido que alguien más haya reclamado previamente posiblemente no podrás publicar (me pasó con un video que puse hecho en iMovie con la música que viene de ejemplo para acompañar los videos, Facebook lo rechazó porque alguien ya había reclamado algo de eso). Como sea, si tienes algún detalle de ese tipo o simplemente no quieres que tu video esté público en otras redes y quieres servirlo en tu propio servidor, lo ideal es convertirlo a algún formato popular y/o más o menos estándar para que se pueda reproducir sin problema.

Hay varios formatos, en que aquí nos ocupa es el codec H264, que aunque propietario, la mayoría de dispositivos lo pueden reproducir sin problema. Lo primero que debemos tener instalado es ffmpeg, hay varios sitios donde muestran como instalarlo con el codec H264. Ya que lo tenemos instalado, entonces hacemos algo como lo que sigue:

ffmpeg -i archivo.mov -loglevel quiet -hide_banner -codec:v libx264 -profile:v high -pix_fmt yuv420p -movflags +faststart -preset slower -c:v libx264 -crf 20  -vf scale=-1:480 -threads 0 -codec:a libfdk_aac -b:a 128k archivo.mp4

Trataré de explicar (a mi entender) las opciones para la generación del archivo MP4:

-loglevel quiet -hide_banner son opciones para que si ejecutamos el script de forma automática no tengamos una salida en consola, útil para cuando se tiene alguna tarea programada cada cierto tiempo. Eliminando eso nos da mucha información de la conversión.

-codec:v libx264 pues eso, usa el codec H264 para convertir.

-profile:v high tiene que ver con el perfil de compatibilidad con la que generará el video, high es compatible con iPhone 4S en adelante, con Android 4 en adelante. Si quieres que realmente sea compatible con casi cualquiera puedes utilizar "baseline" o "main".

-pix_fmt yuv420p compatiblidad con Quicktime de Apple

-movflags +faststart es para que cuando sea un video puesto en web, se pueda empezar a reproducir desde que está cargando, sin esperar a que termine de bajar el video, indispensable para usarlo con un reproductor de video.

-preset slower representa la velocidad contra la compresión del video, hay varias opciones pero esta es la que mejor resultados me ha dado.

-crf 20 es la calidad con la que va a generar el video, entre más cercano a 0 esté el valor será pasado con la mayor calidad posible. 20 es un buen número, se puede aumentar o disminuir, de eso dependerá el tamaño final del archivo mp4.

scale=-1:480 es el tamaño de imagen que se mostrará (resolución), aquí no importa el tamaño que se elija (me refiero a que no tiene nada que ver con el tamaño final del archivo), dependerá de lo que queremos o cómo queremos mostrar el video. El primer valor es para el ancho y el segundo para lo alto. -1 es automático, 480 es lo que elegí para lo alto del video.

Por lo demás es la calidad del audio (AAC y calidad stéreo 128kbps), si bien se pueden disminuir o aumentar ahí dependerá de qué tan importante es la voz o audio que acompañe a la imagen.

Con eso nos generará un archivo de aproximadamente 10MB por cada minuto de video... así si tenemos 5 minutos el archivo será de unos 50MB.

Aquí está mejor explicada cada opción: ffmpeg.org/wiki/Encode/H.264

Por último si no te quieres complicar la vida, puedes utilizar el programa de la piñita, Handbrake https://handbrake.fr/ que ya está disponible para varias plataformas y tiene "presets" establecidos para crear el archivo, aunque claro... ahí no puedes automatizarlo ya que no está en línea de comandos.

Al final ya que tienes tu archivo mp4 lo puedes mandar a llamar con <video src="archivo.mp4" width="300" height="150"></video> o bien utilizar alguna biblioteca javascript para control del video, como http://videojs.com/

+ fotos / videos

https://panchito-kardashian.tar.mx/media/2016/11/ffmpeg-1200x675.png

Almacenado en apps, ffmpeg, video

por Jorge Martínez Mauricio :)

blog / fotos / archivo

Convertir videos para publicar en web HTML5

tar.mx es un blog sobre fotografía, tecnología y otras chunches

modificado martes 13 de julio de 2021, 13:08

cuentame