Vídeo en tu web

JW Player es un reproductor multimedia que facilita la tarea de integrar un vídeo o lista de vídeos en el artículo de un blog, wiki, moodle, joomla o página web. La incorporación de un documento videográfico en una página web puede resultar interesante en la difusión de una experiencia o proyecto,  en la presentación de una propuesta de trabajo al alumno/a, etc, etc.

Características de JW Player

JW Player es el reproductor de vídeos más utilizado actualmente en los gestores de contenidos CMS. Esto es debido a sus múltiples e interesantes prestaciones:

• Flexibilidad. Admiten la configuración de un amplio catálogo de parámetros: nombre y ubicación del archivo de vídeo o lista de reproducción, imagen asociada, apariencia, color, reproducción contínua, aleatoria, al inicio, etc.
• Integración. Proporcionan un sistema fácil, limpio y elegante para integrar un vídeo en una página web.
• Vídeos externos. Permite mostrar vídeos alojados en Youtube y otros repositorios de vídeos.
• Flash. 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.
• Control de usuario. Ofrecen al lector de la página web una consola que le permite controlar la reproducción del vídeo.
  
• Fiabilidad. Su funcionamiento es robusto y fiable.
• Estándares. Utilizan formatos estándar de listas de reproducción XML, archivos de audio FLV, imágenes JPG, etc

Instrucciones de uso

Paso 1. Obtener un vídeo.

Se puede obtener un archivo de vídeo siguiendo uno de estos procedimientos:

• Captura de cámara DV. A partir de la grabación realizada con una cámara digital DV. La captura y edición del vídeo se realiza con programas como Movie Maker (Windows), Kino (Ubuntu) o iMovie (Mac).
• Fotos narradas. Tomando como material de partida una colección de imágenes o fotos se crea un vídeo que las muestre de forma secuencial usando transiciones, efectos, textos, música de fondo, etc. Esta tarea se puede realizar con programas como PhotoStory 3 (Windows), Movie Maker (Windows), Imagination (Ubuntu), iMovie (Mac) o Picasa 3.
• Banco multimedia del ITE-MEC. En el repositorio del Banco multimedia del ITE-MEC se pueden encontrar y descargar directamente interesantes vídeos susceptibles de explotación didáctica.
• Descarga de un vídeo desde un repositorio. En sitios web como Youtube, TeacherTube, Mediateca Educamadrid, etc, aunque no se ofrece un enlace para la descarga directa del archivo de vídeo, es posible descargarlo utilizando el navegador web Mozilla Firefox con un complemento como Video DownloadHelper. Cuando nos situamos en la página de reproducción de un vídeo, si pulsamos en el botón de este complemento en la barra de herramientas del navegador, se ofrece la descarga directa de ese vídeo en formato FLV/MP4. Esta tarea permite visualizar en clase vídeos previamente descargados cuando no disponemos de conexión a Internet en el aula.
• Descarga de un vídeo desde TV. Si accedes al asistente del proyecto PyDownTV puedes pegar la URL de la página donde se muestra un vídeo de  TVE a la carta, Antena3 Modo Salón, Telecinco, etc. Como resultado obtendrás la URL oculta que permite la descarga directa del vídeo. Este asistente facilita la descarga de vídeos desde los sitios de las principales televisiones españolas. Más información en: Proyecto PyDownTV
• Rippear un DVD Video. Mediante el programa DVD Decrypter es posible extraer los archivos VOB que contienen las pistas de audio y vídeo de un disco DVD. Luego mediante un programa como DVDx 4.0 se convierten estos ficheros VOB a un archivo de vídeo de formato DivX-Xvid, MPEG-4, MOV o FLV.

Cuando ya disponemos de un archivo de vídeo en nuestro equipo para reproducirlo se aconseja utilizar el programa VLC Media Player. Esta aplicación ofrece unas características muy interesantes:

• Formatos de vídeo. Reproduce la mayoría de formatos de vídeo incluyendo FLV y MP4.
  
• Gratuito y multiplataforma. Funciona en windows, linux,mac, etc.
• Versión portable. Dispone de versión instalable pero también otra portable: VLC Portable.
• Pantalla completa. Permite el visionado a pantalla completa pulsando la tecla de función F11. Esto resulta muy útil cuando se proyecta en un aula o en una pizarra digital.
• Capturas de imagen. Cuando se reproduce un vídeo se puede capturar una imagen instantánea  mediante Video > Capturar pantalla. De esta forma se puede crear una imagen a modo de vista previa de un vídeo.

Para conocer el códec de audio y vídeo con que ha sido creado un archivo de vídeo se puede utilizar MediaInfo. Basta con abrir el archivo con este programa para disponer de una completa información del mismo. Este analizador proporciona información sobre los códecs que son necesarios tener instalados en el ordenador para que se pueda reproducir o editar.

Paso 2. Conversión del vídeo a formato FLV.

El formato de archivo FLV (Flash Video) presenta las siguientes características que lo convierten en un formato ideal para la difusión de vídeo en internet:

• Calidad visual. El formato FLV utiliza códecs como Sorenson Spark, On2 VP6, etc que permiten una alta calidad visual con bitrates reducidos.
• Adecuada relación calidad/peso. Al codificar un vídeo a un archivo *.FLV se ofrece la posibilidad de configurar distintos parámetros del mismo para conseguir una aceptable calidad/peso.
• Streaming. Admite una descarga por streaming. Esto significa que el vídeo comienza a reproducirse en cuanto se llena el buffer inicial y continúa reproduciéndose  mientras se completa su descarga en segundo plano.  El vídeo FLV junto con el MP4, son actualmente las opciones más utilizadas.
• Reproductores locales. Se puede reproducir desde distintos programas instalados en el ordenador: MPlayer, VLC Media Player, Riva, Xine, etc.
• Repositorios de vídeos.  Los repositorios de vídeo más conocidos en Internet utilizan este formato para la difusión de vídeos: YouTube, Metacafe, Vimeo, etc.

La conversión de cualquier vídeo a formato FLV se puede realizar con uno de los siguientes programas gratuitos que se pueden descargar e instalar en el ordenador:

• WinFF . Resulta sencillo de utilizar y es multiplataforma.
• Super C. Es algo más complejo pero permite la configuración de múltiples parámetros de calidad en el vídeo final.

También es posible realizar la conversión utilizando una aplicación online donde se sube el vídeo a un servidor para luego descargarlo al equipo en un archivo *.FLV:

• Online Converter to FLV . No requiere registro del usuario para utilizarlo.
• Zamzar . Es un conversor  online de múltiples formatos de archivo.

Paso 3. Conseguir el reproductor JW Player 

Para conseguir el archivo SWF del reproductor puedes descargar desde aquí la versión indicada o bien visitar la página web oficial para comprobar si es posible obtener una versión más actual.

• JWPlayer:   Sitio web oficial  |  jwplayer.zip (version 5.8)

Paso 4. Subir los archivos.

Es necesario subir a tu sitio web: el reproductor SWF, el video FLV y la imagen JPG vista previa del vídeo. Si has decidido experimentar con las indicaciones de este artículo entonces puedes utilizar el archivo de vídeo FLV y el archivo de imagen JPG que se proporciona en este archivo: video.zip

Para alojar estos 3 archivos en la red caben distintas alternativas:

Sitio web personal. Puedes crear una carpeta en tu espacio web personal (video) y subir a él los archivos. Copia la URL de ubicación de estos archivos. Ejemplo:

SWF: http://canaltic.com/video/<nombre_reproductor>.swf
FLV: http://canaltic.com/video/<nombre_video>.flv
JPG: http://canaltic.com/video/<nombre_imagen>.jpg

Google Sites. Si dispones de cuenta en Google, puedes acceder a Google Sites y crear un sitio y dentro del mismo crear una carpeta con el nombre video. Sube todos los archivos a la misma y luego haz clic en el enlace “Ver” del archivo SWF que acabas de subir. Copia y pega en un bloc de notas la dirección que se muestra en la barra de direcciones del navegador. Es una dirección compleja donde debes eliminar el código final a partir de “<nombre_reproductor>.swf”. Consigue la dirección del resto de archivos subidos sustituyendo simplemente el nombre del archivo en la URL que acabas de obtener. Ejemplo:

SWF: https://<codigo_alfanumerico>/site/<nombre_sitio>/video/<nombre_reproductor>.swf
FLV: https://<codigo_alfanumerico>/site/<nombre_sitio>/video/<nombre_video>.flv
JPG: https://<codigo_alfanumerico>/site/<nombre_sitio>/video/<nombre_imagen>.jpg

DropBox. Si dispones de cuenta en DropBox, crea una carpeta con el nombre video en Public y dentro de esa carpeta sube los archivos. 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. Ejemplo:

SWF: http://dl.dropbox.com/u/<numeros>/video/<nombre_reproductor>.swf
FLV: http://dl.dropbox.com/u/<numeros>/video/<nombre_video>.flv
JPG: http://dl.dropbox.com/u/<numeros>/video/<nombre_imagen>.jpg

Paso 5. Generar el código embed.
En canalTIC.com se ha diseñado un asistente que facilita la generación del código embed para la integración de este reproductor:

• Configurador de JWPlayer para vídeo

En el asistente elegido despliega el combo Modelos de configuración y selecciona una opción. En la sección de Vista previa se mostrará el aspecto que tendrá el reproductor con esa configuración. En los cuadros de texto: URL reproductor SWF, URL archivo  y URL imagen sustituye las URL locales por las direcciones de estos archivos alojados en tu espacio web. Cada modelo de configuración define ciertos valores para algunos de los parámetros básicos y avanzados. Cuando hayas elegido un modelo es posible modificar manualmente el valor de todos los parámetros ofrecidos en el asistente. Para que el código embed pille los cambios introducidos no olvides al final hacer clic en el enlace «recargar reproductor«. Si todo va bien el reproductor se mostrará con la configuración definida en el apartado vista previa.

A continuación se especifican los detalles de cada modelo de configuración:

• FLV simple. Se utiliza la URL del archivo SWF del reproductor JW Player y la URL del archivo FLV del vídeo. Los parámetros de anchura y altura en píxeles se deben definir en función del tamaño del vídeo añadiendo 24 píxeles más de altura por la barra de control de reproducción situada debajo.
• FLV con imagen + barra control debajo. Se añade además la URL de la imagen de vista previa en la sección Opciones del archivo > Imagen. 
• FLV con imagen + barra control sobre. En este caso la altura del reproductor coincide con la altura del tamaño del vídeo porque la barra de control se coloca sobre el vídeo. Esto se consigue definiendo el parámetro Opciones de apariencia > Barra de control > Debajo.
• FLV con imagen + skin (glow). En la sección Addons > Skins  de la web de JW Player se puede descargar un ZIP con un skin que permite personalizar el estilo gráfico del reproductor. Se proporciona un amplio catálogo de skins creados por otros usuarios así como las instrucciones para crear y subir uno nuevo. En el asistente se ha utilizado el archivo de skin glow.zip que se ha subido al servidor y su URL se ha introducido en el asistente de configuración en el parámetro Opciones de apariencia > URL ZIP skin. 
• FLV con imagen + XML configuración. Es posible cargar la configuración de todos los parámetros del reproductor (URL del vídeo, de la imagen, colores, apariencia, reproducción, etc) a partir de un archivo XML con una sintaxis especial. En este caso se utiliza la información contenida en el archivo config.xml que se sube al servidor y cuya URL se ha introducido en el parámetro Opciones de apariencia > URL XML config.
• Video Youtube. JW Player permite reproducir un vídeo alojado en Youtube con sólo copiar y pegar en la casilla URL de archivo FLV la dirección del vídeo en Youtube del tipo: http://www.youtube.com/watch?v=iLjZgz7tlzs. Cada vídeo Youtube tiene una URL similar variando el código alfanumérico situado a partir del «v=».
• Video TVE a la carta.  Copia la URL de la página donde se muestra un vídeo de  TVE a la carta. A continuación accede a la web PyDownTV y pega esa dirección. Si todo va bien obtendrás la URL oculta que permite la descarga directa de ese vídeo. Si copias y pegas esta dirección secreta en la casilla URL de archivo en el asistente de configuración de JWPlayer (Ejemplo: http://www.rtve.es/resources/TE_NGVA/flv/6/8/1287773737586.flv) , observarás que es capaz de  reproducir este vídeo alojado en el servidor de TVE.
• Lista FLV.  Una lista de reproducción (playlist.xml) es un archivo de texto con una sintaxis de etiquetas que contienen las URL de los archivos FLV e imágenes JPG. El reproductor lee esta información para cargar las pistas de vídeo correspondientes.  Una vez personalizada la lista XML es necesario subirla a tu espacio web, obtener la URL absoluta de esa lista y en el configurador de JW Player sustituir el contenido de la casilla URL de la lista XML.
• Lista FLV con imagen + barra lista debajo. Es similar a la anterior pero en este caso se amplía la altura del reproductor en 180 píxeles más para que por debajo de la barra de control de la reproducción se muestre la barra con las entradas de la lista de vídeos. Esto se consigue configurando el parámetro Opciones de apariencia > Ubicación de la lista > Debajo.
• Lista Feed Vídeos Youtube. Si accedes a la web de la API de Datos de Youtube dispones de un asistente que te permite obtener la URL de un feed que devuelve una lista de vídeos de Youtube: los más visitados, los más recientes, los más puntuados, etc. Puedes obtener la URL de un feed que incluye los vídeos de una lista de reproducción, del listado de mis favoritos de un usuario concreto, etc. Ejemplo de feed de una lista de reproducción cuyo código de lista en Youtube se indica: http://gdata.youtube.com/feeds/api/playlists/FD3D7D51716DD038. El identificador de una lista de reproducción Youtube se obtiene de la URL que se muestra en la barra de dirección del navegador cuando se está visualizando esa lista. Es necesario eliminar las dos primeras letras PL que indica que es una playlist (lista de reproducción).

Paso 6. Copiar/pegar el código embed
Una vez configurado el reproductor JW Player, selecciona el código embed que te proporciona el configurador para luego copiarlo y pegarlo en el código HTML de tu página web.

Descargas

• JW Player reproductor SWF: jwplayer.zip (version 5.8)
• Video FLV + Imagen JPG: video.zip
• Configuración XML:  config.xml
• Lista de reproducción: playlist.xml

Más información

• Sitio web oficial de JW Player