Criado Indomable

Un intento de Blog de Sebastián D. Criado - 09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0

Videos FLV en tu sitio web

Publicado por criadoindomable en Martes, Diciembre 12, 2006 16:08

Software LibreSeguramente habrán visto vídeos desde los sitios de Google Video o YouTube y se quedaron pensando. ¿Puedo hacerlo en mi sitio web?
Gracias a una serie de programas libres es posible pasar casi cualquier formato de vídeo (AVI, MPEG, WMV, OGG) al formato FLV o Flash Video y luego dejarlo embebido en una página web sin más esfuerzo que poner un programa libre que lo reproduzca. Se contara además con capacidad de streming de los vídeos servidos.

Programas utilizados:

ffmpeg
flvtool2
FlowPlayer
Servidor GNU/Linux con Apache web server.

Uso del FFmpeg:

Para hacer la conversión de audio y vídeo se puede utilizar el programa ffmpeg el cual es un programa libre con licencia LGPL y que cuenta con muchas características como por ejemplo, tomar la fuente en vivo o convertir de un sample rate a otro.
y un tamaño de archivo resultante que es inferior al 10% del tamaño original (esto puede variar

Ejemplo de conversión al formato FLV:

ffmpeg -i video.mpg -acodec mp3 -ar 22050 -ab 32 -f flv -s 288×216 video.flv

(*) Nota: en este ejemplo se utilizo el codec mp3, que siendo el mismo un formato patentado se uso por compatibilidad.

Los parámetros son:

-acodec : Fuerza un codec determinado, se pueden ver los codec ingresando ffmpeg -formats

-ar: Setear la frecuencia de sampleo del audio

-ab: Setear el bitrate de audio

-f: Fuerza el formato de salida

-s: Setear el frame size

Se puede encontrar muchas más opciones para pasarle al ffmpeg en la página de documentación del programa.
http://ffmpeg.mplayerhq.hu/ffmpeg-doc.html

Uso del flvtool2:

Una vez que hayamos hecho la conversión, se necesita pasarlo por este programa hecho en Ruby que incrusta los meta datos necesario para poder usar la barra de progreso del reproductor embebido.

Para hacer esto bastara con ingresar:

flvtool2 -UP video.flv

Si se encuentran con el siguiente error

/usr/local/lib/site_ruby/1.8/flv/amf_string_buffer.rb:163: [BUG] Segmentation fault

es hay que arreglar algo en los fuentes de este programa que al momento de escribir este articulo todavía no esta corregido.

En el archivo amf_string_buffer.rb

Cambiar esto:

write [(time.to_i * 1000.0)].pack(’G')

por esto:

write [(time.to_f * 1000.0)].pack(’G')

Ahora volver a intentar la orden anterior.

Uso de FlowPlayer:

Flowplayer es un reproductor de flash totalmente libre que cuenta con diversas posibilidades, como la de poner un jpg al inicio par hacer click en él y que comience el vídeo, cambiar los skins, y hacer streaming del flv que suban.

Para poder usarlo tendrán que sunbir el archivo FlowPlayer.swf y el FLV que hayan generado a un directorio del apache que tenga permiso de lectura.

Luego, en la página que quieran incrustar el vídeo poner lo siguiente:

<object type=”application/x-shockwave-flash” data=”FlowPlayer.swf”
width=”480″ height=”360 id=”FlowPlayer”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”FlowPlayer.swf” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noScale” />
<param name=”wmode” value=”transparent” />
<param name=”flashvars” value=”videoFile=video.flv&
autoPlay=true&loop=false&autoBuffering=true
&initialScale=fit&”/>
</object>

Para que este ejemplo funcione, tanto la página web como el video.flv y el FlowPlayer.swf tienen que estar en el mismo directorio.

Podrán encontrar más ejemplos en la página de FlowPlayer.

Nota final:

Esta solución no es lo libre que quisiera que fuera, pero lo es bastante.

Es recomendable ver soluciones con ffmpeg2theora y VLC para reproducir a fin de contar con una solución 100% libre. Estoy en esa investigación :D

Anexo:
Muchas personas me han escrito mails preguntandome sobre la implementación sobre IIS (lo cual no aconsejo para nada por ser una plaaforma privativa).

Aquí va la explicación:

La gran diferencia que se encontraran es que se necesita escapar los “&” de la ultima linea poniendolos como “&amp;”.

Otra cosa es poner el archivo FlowPlayer.swf en un lugar que tenga permiso, para esto vas a tener que tener aaceso al servidor web.

Para más info, sugiero que se vea la página de FlowPlayer.
http://flowplayer.sourceforge.net/


Allí se podrá obtener más información sobre los parametros también.

42 comentarios a “Videos FLV en tu sitio web”

  1. Gonzalo Dice:

    Muy bueno Seba.

  2. LeitoMonk Dice:

    Y los que usamos linux en PPC ¿Cómo lo vemos? ;)

    Seba, bien, pero mal :p

  3. RanchoX Dice:

    para LeitoMonk, los que usamos linux en ppc siempre tibimos y bamos a tenes ese problema.

    Para el autor de esta pagina:
    MUY BIEN, MUCHAS GRACIAS!!!

  4. criadoindomable Dice:

    De nada ;)

  5. Javier Dice:

    Tengo las animaciones en SWF…¿alguien sabe con qué soft convertirlas en FLV?
    Gracias. Javier.

  6. criadoindomable Dice:

    Podes pasarlo a AVI primero y después a flv

    ffmpeg -i x.swf x.avi

    No lo he probado, pero tendría que funcionar

  7. Alex Dice:

    Excelente mi estimado
    Buen dato , estoy en la creacion de un administrador de contenidos y tu info me esta dando piso para continuar.

    suerte con la info q sigas preparando, ahora q se por donde empezar a buscar info sobre como instalar las librerias… xD

    salu2…

  8. Ata Dice:

    Hola, muy interesante tu articulo.

    La razon de este comentario es el siguiente:

    Tengo el ffmpeg en EXE para windows, al cual le paso los siguientes parametros…

    — ffmpeg -i video.avi -acodec mp3 video_flash.flv —

    Si bien exporta correctamente el video al formato FLV para luego ser reproducido por flash no consigo que exporte el sonido.
    Tras tener este problema intente con los siguiente parametros

    — ffmpeg -i video.avi -acodec mp3 -ar 22050 -ab 32 -f flv -s 288×216 video_flash.flv —

    Pero tampoco pude solucionar el tema del sonido, lo unico que logro es exportar el video solo, sin el audio.

    La verdad que estoy un poco desorientado, si puedes ayudarme te lo agradecere mucho!.

    Saludos y gracias de antemano y perdon por postear de vuelta, me interpreto algunas lineas del comentario como html :(

  9. criadoindomable Dice:

    No sabría aclararte la duda en Windows, ya que al ser una plataforma privativa, no la utilizo.

  10. Ata Dice:

    Gracias de todos maneras, voy a seguir intentando. En caso de no obtener buenos resultados probare bajo linux…

    Saludos…

  11. criadoindomable Dice:

    Contestación para Fedush:
    La
    gran diferencia que encontraras es que necesitas escapar los “&” de la
    ultima linea poniendolos como “&amp”.
    Otra cosa es poner el archivo FlowPlayer.swf en un lugar que tenga
    permiso, para esto vas a tener que tener aaceso al servidor web.
    Fijate bien el ejemplo, donde dice http://www.tuweb.com es donde tenes que
    poner la dirección del sitio. FIjate que hace referencias a una
    carpeta videa y dentro de ella flowplayer.

    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #

    Para más info, te sugiero que veas la página de FlowPlayer.
    http://flowplayer.sourceforge.net/
    Allí podrás obtener información sobre los parametros también.

  12. supermuka Dice:

    puse un video flv con codigo en un swf. mi problema es q quiero controlarlo externamente. lo 1ro q hice fue crear botones a mi gusto como play y stop, luego mi cliente me dijo q ue le gustaria q apareciera la barra de estado del video, entonces jale al escenario el componente bufferingBar, lo q no se es q codigo usar para q mi barra funcione, alguien me puede ayudar por favor?

  13. federico Dice:

    buenisimo el tutorial!
    cuando ejecuto
    fmpeg -i tandiltromso.avi -acodec mp3 -ar 22050 -ab 32 -f flv tandiltromso.flv
    FFmpeg version SVN-rUNKNOWN, Copyright (c) 2000-2004 Fabrice Bellard built on Sep 20 2006 00:26:15, gcc: 4.1.2 20060906 (prerelease) (Ubuntu 4.1.1-13ubuntu2)

    Seems that stream 0 comes from film source: 2997.00 (2997/1) -> 29.97 (30000/1001)
    Input #0, avi, from ‘tandiltromso.avi’:
    Duration: 00:01:57.4, start: 0.000000, bitrate: 803 kb/s
    Stream #0.0: Video: mpeg4, yuv420p, 360×240, 29.97 fps(r)
    Stream #0.1: Audio: mp3, 48000 Hz, stereo, 192 kb/s
    File ‘tandiltromso.flv’ already exists. Overwrite ? [y/N] y
    Output #0, flv, to ‘tandiltromso.flv’:
    Stream #0.0: Video: flv, yuv420p, 360×240, q=2-31, 200 kb/s, 29.97 fps(c)
    Stream #0.1: Audio: 0×0000, 22050 Hz, stereo, 32 kb/s
    Stream mapping:
    Stream #0.0 -> #0.0
    Stream #0.1 -> #0.1
    Unsupported codec for output stream #0.1

    algo pasa con el audio, el original esta en 48000 y parece q FLV soporta hasta 44000. nada, me tira error. se te ocurre algo. gracias de antemano!

  14. criadoindomable Dice:

    Fijate que le estas diciendo en el comando que lo pase a 22050 (-ar) y eso es lo que hace.

    fmpeg -i tandiltromso.avi -acodec mp3 -ar 22050 -ab 32 -f flv tandiltromso.flv

    Saludos.-

  15. Fixxxer Dice:

    Oye, ¿es posible con el ffmpeg convertir directo de un video mpg a formato .swf? Porque ya comprobe que si lo convierte a .flv, pero yo necesito el .swf. Pero me marca lo siguiente:

    /usr/bin/ffmpeg -i ninja.mpg -ar 22050 -ab 32 -f swf -s 720x480 ninja.swf
    ...
    Output #0, swf, to 'ninja.swf':
    Stream #0.0: Video: flv, yuv420p, 720x480, q=2-31, 200 kb/s, 30.00 fps(c)
    Stream #0.1: Audio: 0x0000, 22050 Hz, stereo, 32 kb/s
    Stream mapping:
    Stream #0.0 -> #0.0
    Stream #0.1 -> #0.1
    Unsupported codec for output stream #0.1

    Saludos.

  16. Leon Martinez Dice:

    Criadoindomable:

    No se mucho de código web, agradezcote me envies una plantilla de pagina web con el código incluido de flowplayer mas una playlist para cinco videos. Los videos se colocaran en formato flv por lo que no se encesita la conversión.
    Gracias.-

  17. SAPINTO Dice:

    Oye, ¿es posible con el ffmpeg convertir directo de un video mpg a formato .swf?
    imposible según mi experiencia; el flv es un flash video, el swf es el player que reproduce el flv.
    lo que intuyo que necesitas es pasar el o los .flv a una carpeta, con php leer el contenido de la misma, generar un xml y a través de loadvars cargar los flvs en el player.
    como ves, el player es siempre el mismo, el contenido que lee es el dinámico.

  18. gonpre Dice:

    Hola queria saber si se puden utilizar estos programas bajo un hosting contratado con linux y como… espero me puedas ayudar gracias.

  19. criadoindomable Dice:

    Gonpre, si es posible, mira que lo que pongo en el articulo lo único que necesita es que puedas subir el flowplayer y que puedas editar el HTML.

  20. gonpre Dice:

    Gracias por la respuesta tan pronta, pero a lo que me referia era a convertir los videos que se suban a flv, y ya despues estos reproducirlos. Mas bien me refiero al FFmpeg. Saludos =D

  21. criadoindomable Dice:

    La conversión tienes que hacerla fuera del hosting y después subir el FLV resultante.

  22. nico Dice:

    Hola amigos miren mi problema es este, puedo compilar sin audio pero cuando incluyo el audio da este error que puede ser?
    tengo un fedora 4
    ffmpeg -i 13.mpg -acodec mp3 -f flv -s 288×216 testt.flv
    FFmpeg version SVN-r9451, Copyright (c) 2000-2007 Fabrice Bellard, et al.
    configuration: –enable-shared –enable-libmp3lame
    libavutil version: 49.4.1
    libavcodec version: 51.40.4
    libavformat version: 51.12.1
    built on Jul 10 2007 18:14:35, gcc: 4.0.2 20051125 (Red Hat 4.0.2- 8)
    Input #0, mpeg, from ‘13.mpg’:
    Duration: 00:04:18.7, start: 0.180000, bitrate: 1715 kb/s
    Stream #0.0[0x1e0]: Video: mpeg1video, yuv420p, 320×240, 1547 kb/s, 29.97 fps(r)
    Stream #0.1[0x1c0]: Audio: mp2, 44100 Hz, stereo, 112 kb/s
    Output #0, flv, to ‘testt.flv’:
    Stream #0.0: Video: flv, yuv420p, 288×216, q=2-31, 200 kb/s, 29.97 fps(c)
    Stream #0.1: Audio: 0×0000, 44100 Hz, stereo, 64 kb/s
    Stream mapping:
    Stream #0.0 -> #0.0
    Stream #0.1 -> #0.1
    Unsupported codec for output stream #0.1

  23. criadoindomable Dice:

    Nico, fijate que comento eso a Federico más arriba.

  24. Lucero Dice:

    Hola… estoy convirtiendo videos desde mi página web, el problema es q con lo parámetros q me hicieron favor de mostrar anteriormente, el video q se convierte tiene un tamaño en MB de casi lo doble del original, como puedo cambiar esto para que se haga más pequeño o se comprima o algo asi???? Gracias!!!

  25. criadoindomable Dice:

    Lucero, fijate por favor en las páginas de manual del ffmpeg

    $man ffmpeg

  26. Charlie Dice:

    alguien sabe cuales son los codecs que necesita ffmpeg para codificar el audio en el .flv?

    en Ubuntu

  27. near Dice:

    Hola:

    Muchisimas gracias por la info esta muy buena…

    sigue asi

    Salu2

  28. Leonardo Dice:

    Para los que quieren convertir a flv y lo hace sin audio: hay que compilar el ffmpeg, en el siguiente link está como hacerlo: http://www.ymipollo.com/~ToRo/109119.convertir-videos-a-flv-con-linux-ubuntu.html , en el config, usé las siguientes opciones: ./configure –enable-gpl –enable-pp –enable-vorbis –enable-libogg –enable-a52bin –enable-dc1394 –enable-libgsm –disable-debug –enable-mp3lame –enable-faad –enable-faac –enable-xvid y el audio anduvo sin problemas.

    Suerte a todos!!
    Aguante Linux!!!

    Leo

  29. Mairim Dice:

    diseñe mi pagina web en dreamweaver 8
    y le agrege unos archivos .swf en mi computadora todo se ve muy bien pero en otras computadoras no se ven algunos archivos .swf y un archivo de diapositivas las imagenes se ven encimadas alguien podria ayudarme?

    Gracias

  30. criadoindomable Dice:

    No,la verdad es que no se como ayudarte, no conozco dreamweaver. Solo uso Software Libre.

  31. Emanuel Dice:

    Muchas gracias por esta nota esta muy buena…

  32. Cristian Dice:

    Tengo todos los archivos del Flow Player subios al servidor y el código HTML puesto en la Web tal como indicas, y funciona todo perfectamente. El problema està cuando le doy a FullScreen, parece que se abre una URL própia de los creadores del programa con publicidad. Como puedo solucionar esto?

  33. criadoindomable Dice:

    Cristian, me parece que había un problema con el código del FlowPlayer
    http://flowplayer.org/node/32
    Te diría que lo bajes de nuevo

  34. Cristian Dice:

    Criadoindomable, no era problema del código, el problema estaba en que no tenía puesto a true el useNativeFullscreen, ahora ya funciona correctamente pero aparece el logo de FlowPlayer en la esquina inferior-izquierda. Sabes como se puede hacer desaparecer?

    Gracias

  35. Hikari Dice:

    un programa gratis es el CINEMA FORGE pueden cambiarlos a FLV,MOV,RM,MPG,AVI

  36. criadoindomable Dice:

    no lo conozco. Es libre?

  37. criadoindomable Dice:

    no lo conozco. Es libre?

  38. Isaac Paton Dice:

    Me interesa saber que tipo de server hay que tener para que estos videos que sirves desde la propia web se vean de una forma fluida por los usuarios.

  39. criadoindomable Dice:

    La mayor carga de proceso esta del lado del cliente por el flash.
    Del lado server lo que se demanda es ancho de banda.

  40. Jose Dice:

    Poner videos FLV en tus paginas
    http://www.publiblanes.net/video_flv/como_poner_videos_flv_en_tus_paginas.htm
    Saludos y que lo disfruteis.

  41. fabiola Dice:

    estimados llegué tarde a la conversación pero estoy en un problema, subí mi página y los videos que ya estaban en flv y en swf, no se ven, quisiera saber qué codigo se debe insertar para que se puedan ver en cualquier equipo, aunque notengan flash.
    gracias.

  42. criadoindomable Dice:

    Fabiola, me parece que estás equivocado. Esto no es un foro, es un Blog. (ver: http://es.wikipedia.org/wiki/Blog)
    No hay conversación :D
    Sobre lo que pedís, lo que ves en el articulo es lo que hay. Estoy seguro que encontraras gracias a google la respuesta para tu pregunta.

Escribe un comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>