Multimedi@ y Web 2.0-II: embed

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:

Copia el código embed. Clic derecho sobre el código HTML del artículo y selecciona Pegar.

Para terminar pulsa en el botón Publicar y a continuación haz clic en el enlace Ver blog para ver el resultado final.

Jose Ángel Laredo

Se describe una ejemplificación de como publicar una presentación de Picasa en Blogger.

Nos autentificamos en Picasa Web: http://picasaweb.google.com
Se mostrará la pestaña Página Principal donde son accesibles los álbumes que tenemos subidos al servidor. Clic sobre el álbum Telefonía ICT para abrirlo.

Mis álbumes recientes. Publico en la red

El candado indica que "solo tu" puedes acceder al álbum. Tenemos que convertirlo en público en la Web. Observe el cambio del candado por otro icono

Es posible compartir tus fotos con todo el mundo, sólo con los amigos que desees o mantenerlas en privado. Picasa incorpora la posibilidad de asociar una licencia Creative Commons a cada foto o álbum indicando las condiciones de uso.

En la columna derecha, haz clic en Enlazar a este álbum. Se mostrará los enlaces para enviar por correo electrónico o para embeber en tu blog una imagen con un enlace al álbum en Picasa Web.

Se describe una ejemplificación de como publicar una presentación de Picasa en Blogger.

Clic en el enlace Incrustar proyección de diapositivas.

Clic en el enlace Incrustar proyección de diapositivas.
Se muestra el cuadro de diálogo Crear una presentación de diapositivas… [Crea una presentación de diapositivas portátil para tu sitio web, tu blog, MySpace, etc].
Elige como tamaño de la presentación por ejemplo Grande 400 px. y marca las opciones Mostrar títulos y Reproducir automáticamente.
Selecciona el código HTML mediante clic derecho, elegir seleccionar todo y copiar.

cuadro de diálogo Crear una presentación de diapositivas…

Accede a Blogger y desde el Escritorio haz clic en el botón Crear entrada nueva.
Añade un título. En mi ejemplo: Publicar una presentación de Picasa en Blogger: Ejemplificación.
En el editor haz clic en el pestaña HTML y pega el código embed copiado anteriormente.