Multimedi@ y Web 2.0-II: Vídeo en tu blog. Ejemplificación de integración del vídeo con JWPlayer utilizando una cuenta de DropBox.

Se trata de integrar un vídeo con JWPlayer en un artículo de Blogger.

Lo que se espera después de añadir el código embed que inserta el visor JWPlayer básico, el vídeo, así como la imagen de vista previa, todo ello alojado en una cuenta de Dropbox, es:

Una opción para evitar las limitaciones de la subida directa a nuestro Blog de un vídeo es integrar vídeos *.FLV utilizando un reproductor JW Player.

Se ejemplifica cómo integrar vídeos *.FLV en esta entrada del blog utilizando el reproductor JW Player, utilizando una cuenta de DropBox.

Se trata de un visor *.SWF diseñado con tecnología Flash. Para su correcta visualización es necesario que el navegador web cliente disponga del plugin de Flash Player.

El archivo que se corresponde con el visor jwplayer.swf necesario para este ejemplo, lo tienes en el zip de este enlace jwplayer.zip [3,6 MB].
Los otros 3 archivos son de ejemplo. Puedes bajar el archivo comprimido, y descomprimir el mismo en una carpeta.

¡comprueba lo que sucede al hacer clic en index.htm!

El visor y los archivos de vídeo y captura de imagen para el ejemplo de esta entrada y distintos a los anteriores, han sido subidos a Dropbox.

El código embed que se necesita se corresponde con este patrón

Se necesita sustituir el visor jwplayer, el vídeo y la captura por los nuevos archivos. Nosotros ya los tenemos en nuestra cuenta de Drupbox, pero... ¿Qué proceso se ha seguido?

El archivo de vídeo lo hemos conseguido visitando el Banco de recursos multimedia del INTEF: http://recursostic.educacion.es/bancoimagenes/web/.

Utilizamos el buscador con el término “estructuras” para localizar y descargar un vídeo de este repositorio.

De los vídeos mostrados nos interesa el AVI de título "Las estructuras artificiales".

Clic en Descargar archivo.

El vídeo obtenido en el Banco Multimedia del INTEF tiene un formato de archivo AVI-XviD y ocupa 71836 KB. Lo convertimos al formato FLV (Flash Vídeo) utilizando el programa WinFF.

En el nuevo formato FLV, el tamaño se ha reducido a 8952 KB.

Ahora necesitamos obtener la imagen de captura. Abre el reproductor VLC Media Player y en Preferencias > Preferencias de vídeo, define JPG como el formato de archivo de salida de las capturas de pantalla, así como el lugar donde se guarda la captura. Cierre el reproductor y vuelve a abrirlo. A continuación reproduce el vídeo FLV y realiza una captura de pantalla en un archivo JPG.

A esta imagen se le puede añadir un texto con un procesador de imágenes:

Sube a tu cuenta en Dropbox la imagen capturada JPG, el vídeo FLV obtenido y el reproductor JW Player.
En nuestra cuenta de DropBox, Carpeta Public, se ha creado una nueva carpeta con el nombre VideoEstructurasArtificiales. Dentro de esa carpeta subimos los archivos.

También podemos subir los tres archivos por ejemplo a Google Sites.

Tenemos un ejemplo detallado en esta entrada: Publicar un vídeo con JWPlayer en Blogger. Ejemplificación.

¿Recuerdas el código a utilizar en la pestaña HTML de Blogger?

Desde el explorador de archivos del sistema Windows haz clic derecho sobre cada archivo subido para elegir DropBox > Copiar enlace público. Si utilizas el interfaz web de Dropbox, haz clic sobre el archivo y elige Copiar enlace público.

En nuestro caso:

http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/jwplayer.swf

http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/LasEstructurasArtificiales.flv

http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/capturaLasEstructurasArtificialesRotulado.jpg

En el código embed sustituye los nombres de los archivos por las URLs obtenidas para cada uno de ellos alojados en la cuenta de DropBox.

En este ejemplo se sustituyo el de jwplayer.swf

En este ejemplo se añade el de video.flv al anterior jwplayer.swf

y los tres sustituidos sustituyendo captura.jpg que es el que faltaba.

Crea una entrada en tu blog con un título alusivo y un breve texto. Como complemento puedes añadirle las etiquetas:
Clic en el botón Crear entrada nueva para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo.
Teclea un título. En mi caso: Vídeo en tu blog. Ejemplificación de integración del vídeo con JWPlayer utilizando una cuenta de DropBox.

Clic en botón HTML para mostrar el código HTML del artículo.
Añade a ella el código que inserta el visor, el vídeo, y la captura que ha de servir como imagen de vista previa. Todos ellos alojados en tu cuenta de Dropbox: