martes, 18 de diciembre de 2012

Vídeo HTML5

Es posible incorporar un vídeo al artículo de un espacio educativo (blog, wiki, moodle) usando HTML5.  En Internet se dispone de distintos reproductores de vídeos diseñados en esta tecnología y que representan una excelente alternativa a Flash. De esta forma resultarán accesibles desde cualquier tipo de dispositivo: teléfono móvil, tableta, notebook, pc, etc. En esta entrada se proponen algunos modelos gratuitos que se pueden descargar desde Internet. Se trata de variantes de funcionamiento (Javascript) y estilo gráfico (CSS3) al elemento <video>  ofrecido por defecto en el lenguaje HTML5.

Demos

Características

La elección de estas soluciones se ha basado en sus prestaciones:
  • Flexibilidad. Admiten la configuración de un cierto repertorio de parámetros: nombre y ubicación del MP4, apariencia, color, reproducción continua, aleatoria, al inicio, etc.
  • Control. Ofrecen al lector de la página web una consola que le permite controlar la reproducción del vídeo.
  • Integración. Proporcionan un sistema fácil, limpio y elegante para integrar un vídeo en una página web.
  • HMTL5. Se trata de soluciones alternativas a la tecnología Flash. Para su correcta visualización es necesario que el navegador web cliente admita la ejecución de Javascript lo cual suele venir establecido por defecto.
  • Fiabilidad. Su funcionamiento se ha comprobado robusto y fiable.
  • Facilidad. La simplicidad de configuración y personalización de sus parámetros.
  • Estándares. Permiten reproducir archivos de vídeo de formatos estándar: MP4 y OGG.
  • Gratuidad. Se ofrecen con carácter gratuito para un uso no comercial.

Paso 1. Conseguir 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 Live 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 Live Movie Maker (Windows), Imagination (Ubuntu), iMovie (Mac) o Picasa 3.
  • Banco multimedia del INTEF-MEC. En el repositorio del Banco multimedia del INTEF-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 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 o MP4.
En el caso de vídeos de terceros alojados en Internet (p.e. vídeos de TV) quizás sea más interesante disponer de su URL de descarga. El reproductor HTML5 se puede configurar con esa URL y de esta forma evitamos tener que descargarlo a nuestro ordenador y subirlo a nuestro espacio web personal. En los ejemplos que se proporcionan en este artículo se utilizarán vídeos alojados en URLs externas.
Ejemplo: http://media5.rtve.es/resources/TE_SDOCUM/mp4/9/9/1318198131299.mp4
Si 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 el MP4 y OGG.
  • 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 o póster 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 aunque como se comentó con anterioridad programas como VLC Media Player son capaces de reproducir prácticamente todos los formatos.

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

El formato de archivo de vídeo MP4 es un formato ideal para la difusión de vídeo en internet usando tecnología HTML5. Varios son los motivos que justifican esta decisión:
  • Calidad visual. Se basa en el estándar MPEG-4 utilizando el códec H.264 AVC para vídeo y el códec AAC o MP3 para audio.
  • Adecuada relación calidad/peso. Al codificar un vídeo a un archivo *.MP4 se ofrece la posibilidad de configurar distintos parámetros del mismo para conseguir una aceptable relación calidad/peso.
  • Universalidad. Es un formato de vídeo de gran popularidad y expansión debido a que se utiliza en los reproductores personales iPod y en el software de reproducción QuickTime+iTunes de Apple.
  • Reproducción. En el ordenador se puede reproducir con VLC Media Player, QuickTime, etc.
  • Repositorios de vídeos. Los repositorios de vídeo más populares en Internet utilizan este formato para la difusión de vídeos de alta calidad HQ: Youtube, Vimeo, etc.
  • Extensiones. El archivo *.MP4 es un contenedor dentro del cual además de audio y vídeo sincronizados también se pueden almacenar imágenes fijas, subtítulos, información de capítulos, etc.
  • 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.
La conversión de cualquier vídeo a formato MP4 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 *.MP4:
  • Online Converter to MP4. No requiere registro del usuario para utilizarlo.
  • Zamzar. Es un conversor  online de múltiples formatos de archivo.

Paso 3. Conseguir el reproductor HTML5

A excepción de la solución video HTML5 que no utiliza CSS ni Javascript, el resto de reproductores que se proponen se proporcionan en una carpeta independiente que contiene todos los archivos necesarios para que funcione. Para obtenerlo puedes descargar desde aquí la versión indicada o bien visitar la página web oficial de cada uno para comprobar si es posible obtener una versión más actual.

Paso 4. Elegir el reproductor

Elige un modelo de los propuestos. En función de tus necesidades se puede elegir uno u otro:
  • Video MP4. Todos los reproductores se pueden utilizar para integrar un archivo de vídeo MP4.
  • Listas de reproducción. Para incorporar una lista de reproducción de vídeos entonces elige OSM Player o JPlayer.
  • Subtítulos. Para integrar subtítulos resulta más fácil con LeanBack y Video.js.
  • Streaming. JPlayer se puede emplear para mostrar vídeos publicados en streaming RTMP.
  • Multi-Resolución. Si se desea ofrecer distintas calidades de vídeo entonces una buena opción es LeanBack.
  • Vídeos Youtube. Para mostrar vídeos de Youtube entonces MediaElement y OSMPlayer.
Descarga y descomprime el zip correspondiente. Como resultado obtendrás una carpeta que contiene todo lo necesario para que funcione.

Paso 5. Configurar el reproductor

Si vas a utilizar un archivo o archivos de vídeo propios puedes copiarlos al interior de la carpeta que has obtenido anteriormente. Otra opción es disponer de la URL de ese vídeo y de la imagen que utilizarás como vista previa. Ambos activos (vídeo y póster) pueden estar alojadas y disponibles en un servidor de terceros o bien en la carpeta del reproductor.
A continuación utiliza el Bloc de Notas o el editor NotePad ++ portable para abrir la página HTML que muestra el vídeo. En el código HTML resulta fácil localizar la URL del vídeo MP4 y de la imagen JPG que se muestra a modo de póster. Modifica estos valores para que apunten a los activos deseados. Guarda el archivo resultante.

Paso 6. Subir los archivos al servidor

Es necesario subir a tu sitio web la carpeta con todos los archivos y subcarpetas necesarias para que el reproductor funcione. Para alojar estos archivos en la red caben distintas alternativas:
  • Sitio web personal. Puedes subir la carpeta del reproductor a tu espacio web personal y luego renombrarla, por ejemplo, con el identificador “video”. Copia la dirección URL de la página principal: index.html. Ejemplo: http://canaltic.com/video/index.html
  • 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. Luego haz clic en el enlace “Ver” del archivo index.html situado en la carpeta principal. Copia y pega en  la dirección que se muestra en la barra de direcciones del navegador. Ejemplo: https://<codigo_alfanumerico>/site/<nombre_sitio>/video/index.html
  • 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 la página index.html 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: http://dl.dropbox.com/u/<numeros>/video/index.html

 Paso 7. Crear/pegar el código iframe

A continuación construye el código iframe en cuyo interior se mostrará la página index.html con el reproductor elegido:
<iframe src="<url_index_reproductor>" frameborder="0" width="100%" height="360px"></iframe>
El valor de los parámetros width y height se pueden ajustar en función del tipo de reproductor elegido. Para finalizar copia y pega este código en la pestaña HTML del artículo de tu blog, wiki, etc.

Ejemplo

Documentos TV – ¿Generación perdida? - usando el reproductor Video.js

Descarga

Más información

Publicado por en

No hay comentarios:

Publicar un comentario