html5 video en la plataforma de e-learning chamilo de...
TRANSCRIPT
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 455
HTML5 Video en la Plataforma de E-learning Chamilo de Metauniversidad
Javier Ortega Conde y Gorka J. Palazio
Universidad del País Vasco / Euskal Herriko Unibertsitatea
Notas de los autores:
Web: http://metauniversidad.com y http://metaunibertsitatea.com
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 456
Resumen
Con la aparición de HTML5 Video como estándar para publicar el audiovisual en la Web,
sin la dependencia de tecnologías privativas como Flash Video, se abre un nuevo camino para los
desarrolladores. El problema se crea ahora con los tres códecs que se disputan la hegemonía
dentro de la nueva etiqueta <video>, ya que hay navegadores de Internet que no quieren ceder en
sus preferencias de códec. Con ello en mente, dos profesores desarrollan un curso audiovisual en
la plataforma de elearning Chamilo con la implementación de vídeos en WebM, H.264 y fallback
para Flash. El proceso de implementación es arduo a la hora de testear los vídeos en las
diferentes versiones de los navegadores y exige tres copias de cada uno de los 18 vídeos de larga
duración que componen el material básico del curso. Chamilo facilita la publicación de vídeos en
HTML5 con plantillas configurables, y un reproductor de HTML5 Video es necesario. La opción
final fue la de utilizar para la publicación audiovisual el reproductor VideoJS.
Palabras clave: HTML5, vídeo, Chamilo, códecs
Abstract
After appearing the new standard HTML5 Video to publish audiovisual stuff on the Web,
putting apart the dependencies created by private tecnologies like Flash Video, a new roadmap
must be made for developers. The problem is now based on the three codecs that are competing
for the hegemony within the new tag <video>. There are browsers which have to intention to
give up their codec choice. Taking it into account, two teachers developed an audiovisual course
on the Internet using the elearning plataform Chamilo and implementing videos with WebM,
H.264 and fallbacks for Flash. The developing process is hard when testing in different versions
of browsers and three copies in different formats of each of the 15 long duration video files are
the main stuff of the course. Chamilo facilitates the publication of video files with configurable
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 457
templates and a HTML5 Video player is needed. The VideoJS player was the final choice for
implement the process.
Keywords: HTML5, video, Chamilo, codecs
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 458
HTML5 Video en la Plataforma de E-learning Chamilo de Metauniversidad
Introducción
La idea de crear Metauniversidad con su dos dominios Metauniversidad.com y
Metauniversidad.de tuvo un fin práctico de cara a poner en una plataforma las grabaciones de
cursos que hacemos todos los años. Llevamos trabajando en el campo audiovisual en Internet y
en el mundo del ladrillo desde hace tiempo y nuestro origen como miembros de un grupo local
de Software Libre nos llevó a buscar algo nuevo y usable para llevar a la Web los cursos que
grabábamos.
En nuestro proyecto de plataforma educativa Metauniversidad, teníamos claras 3 cosas:
a) Usar una plataforma de elearning potente y con licencia libre. En este punto tenemos
que decir que la plataforma Chamilo LMS87, nos conquistó al conocerla y convenció al
profundizar más en ella.
b) Queríamos unos contenidos ricos con recursos audiovisuales y no llena de texto, texto
y más texto. Las imágenes y presentaciones están bien, y los vídeos y la comunicación en tiempo
real aún mejor. El contenido debe ser rico, dinámico y atrayente para el alumno.
c) Queríamos aprovechar las nuevas tecnologías sin olvidarnos de respetar los estándares
y permitir la compatibilidad con el mayor tipo posible de sistemas y plataformas.
87 http://www.chamilo.org/
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 459
Plataforma de E-learning Chamilo LMS y Estándar HTML5 Vídeo
Chamilo LMS entre otras bondades tiene la del uso del estándar HTML5, que es el último
esperado estándar del World Wide Web Consortium (W3C)88, el consorcio internacional que
emite recomendaciones para que la Web sea algo abierto y compatible para todas y todos.
Además usa una característica asociada, si bien no obligatoria, de HTML5, el "Responsive
Design". El diseño adaptable, también conocido como "web líquida", que permite que las
páginas se adapten a pantallas de cualquier tamaño, desde móviles o tablets, hasta pantallas de
gran tamaño y resolución. Esto permite aprovechar al máximo la pantalla así como permitir una
mejor visibilidad en pantallas pequeñas sin tener que ver las cosas a tamaño minúsculo o
marearse buscando el contenido deseado en la página. Al pensar en HTML5, no todo es de color
de rosa. Es una buena tecnología, pero es nueva y los navegadores web aún trabajan en soportar
todas sus funcionalidades. Si bien, esto va mejorando a gran velocidad y pronto no supondrá
ningún problema, pues incluso Internet Explorer de Microsoft, que siempre ha tenido cierta pelea
con el soporte de sus formatos en vez de los estándares, se está adaptando.
Como decía al principio queríamos que los estudiantes tuvieran una experiencia rica,
multimedia. Y por ello, aparte de la transmisión de audio o vídeo en directo, muy útil para
sesiones de consulta o clases en tiempo real, el uso de vídeos era un objetivo claro. Hacen el
curso más cercano, más ameno, más atractivo. La alumna o el alumno puede ver al profesor o
profesores y no se limita a leer textos. Con la observación de un vídeo, se realiza una experiencia
de estudio más acomodada al discente, ya que le permite alternar su ritmo de trabajo y
diversificar la experiencia de usuario. Además el vídeo siempre se puede parar para seguir
88 http://es.wikipedia.org/wiki/W3c
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 460
viéndolo posteriormente, adaptándose así al ritmo del usuario.
De cara al uso de vídeos, hemos tenido la prueba de fuego al incluir un curso de muchas
horas de duración, que está totalmente basado en vídeos, con las sesiones íntegras impartidas por
los profesores. Queríamos que se pudieran ver en cualquier plataforma, pero debido al
desacuerdo interno de la industria en cuanto a qué formato de vídeo usar, y que todavía hay quien
usa navegadores antiguos tuvimos que pelearnos un poco con los reproductores y formatos a
usar.
En primer lugar, el W3C no exige el uso de uno u otro formato de vídeo, aunque
recomiendan que sea uno libre sin patentes ni regalías, para evitar problemas y trabas.
Inicialmente estaban el formato Ogg Theora89 (extensión .ogv), libre y sin regalías, de la
fundación Xiph.org y el formato H.26490 (extensión .mp4) que no es libre, y para el cual el
consorcio de empresas MPEG LA cobran por el uso de sus patentes pero tiene mejor ratio
calidad/compresión que Ogg Theora. El consorcio anunció la exención de pago hasta 2016 a los
distribuidores y más tarde a perpetuidad pero sólo a usuarios, de modo que a partir de 2016 los
distribuidores sí tendrán que pagar y presumiblemente ese coste será repercutido a los usuarios.
Entonces Google compró la empresa On2 para hacerse con formatos de vídeo
desarrollados por ella y liberó el formato VP8 (con la extensión .webm) para usarlo con HTML5
y competir así con un formato libre, y de mejor ratio calidad/compresión que H.264. Este
formato fue adoptado rápidamente por todos los navegadores web, exceto dos que se niegan a
hacerlo, Safari de Apple, e Internet Explorer de Microsoft. No es casualidad que ambas empresas
formen parte del consorcio MPEG LA y tengan por tanto intereses económicos en que su
formato H.264 gane "la batalla de los formatos de vídeo HTML5". Google asimismo anunció
89 http://es.wikipedia.org/wiki/Ogg_Theora
90 http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 461
que dejaría de dar soporte de H.264 en su navegador Chrome, pero aún no lo ha hecho. Además
el navegador Safari de Apple no tiene soporte de Flash en sus móviles y tablets, lo que supone
que no se puede usar como alternativa a vídeo HTML5 en ellos. Como vemos, toda una gran
problemática con las diferentes versiones de los navegadores que hoy en día existen y que hacen
necesaria la divulgación de tablas comparativas que muchos autores recogen (Bräunlich y Van
Aaken, 2013).
Imagen 1. Tabla comparativa de formatos de vídeo, compatibilidades de los navegadores y cuota
de mercado en 2013 según Long Tail Video (http://longtailvideo.com/html5) Basado en
datos de Statcounter.com.
Por todo esto, si queríamos que las alumnas o alumnos pudieran ver los vídeos desde
cualquier navegador necesitábamos lo siguiente:
- Webm: Válido para la mayoría de los navegadores con soporte de HTML5.
- Mp4: Para los navegadores con soporte de HTML5 pero no de Webm: Safari e Internet
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 462
Explorer
- Flash Vídeo (FLV): Para navegadores antiguos que aún no soportan HTML5.
- Un reproductor que admitiera estos formatos, incluyendo ofrecer la alternativa Flash en
caso de falta de soporte de HTML5.
Evaluamos varios reproductores, y para ello partimos de la excelente tabla comparativa
de VideoSWS que podemos ver en la imagen 2. También consultamos en las tablas comparativas
de HTMLvideo.org91, sitio web dependiente de Kaltura92. Primero probamos con el reproductor
de HTML5 vídeo MediaElement.js93, sin embargo nos daba problemas si se usaba primero
HTML5 y como alternativa de Flash, de modo que no nos valía, pues queríamos dar prioridad a
HTML5. Es de esperar que MediaElement.js, que es un proyecto en constante mejora, solucione
esos problemas. Posteriormente probamos Video.js94, un reproductor totalmente libre y sin
regalías que funciona como nosotros queremos y lo hace muy bien, incluyendo fallback para
soportar Flash Video, de modo que nos quedamos con él para la implementación en la plataforma
Chamilo LMS de Metauniversidad.
91 http://html5video.org/wiki/HTML5_Video_Player_Comparison
92 http://kaltura.com
93 http://mediaelementjs.com
94 http://videojs.com
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 463
Imagen 2. Tabla comparativa de los reproductores de HTML5 vídeo
En un futuro esperamos no necesitar Flash y con la esperada codificación mejorada de
vídeo VP9 (para Webm) es probable que, tanto VP8 (WebM) y H.264 (Mp4) sean descartados y
tengamos un sólo formato libre y compatible con todos los navegadores. Pero a pesar de los
problemas actuales, con todo esto, completamos nuestra misión de tener una plataforma
moderna, rica en contenido audiovisual y con soporte para todos los navegadores.
Los vídeos dentro de la plataforma Chamilo se pueden ir ordenando y publicando en las
lecciones. Las lecciones se enriquecen con elementos audiovisuales y Chamilo pone una de las
plantillas preparada para incorporar vídeos a las lecciones. Dentro de cada lección podemos usar
diferentes recursos y vídeos, creando sublecciones de una manera muy fácil. En la imagen 3 se
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 464
puede ver una de la implementación que hicimos aunque en este caso se trató de un vídeo corto
de presentación de los cursos que interesó dejarlo en Youtube. Como se puede ver, aparece la
plantilla con los tres enlaces a los vídeos insertados (en la parte izquierda). El vídeo seleccionado
es el 3, que como se puede apreciar aparece en la parte central del interfaz. En el margen
derecho, se puede poner un texto orientativo sobre el contenido del vídeo.
Imagen 3. Plantilla de una lección con tres vídeos.
Las plantillas para el vídeo se pueden modificar sabiendo usar HTML. De todas formas,
nosotros aconsejamos no cambiarlas y dejar el ancho y alto del marco contenedor del vídeo
como está, ya que con su configuración de 320 píxeles logramos que la máscara-imagen del
vídeo se vea bien en las pantallas de los dispositivos móviles. No olvidemos que el usuario
siempre puede escoger ver el vídeo a pantalla completa, tanto en VideoJS como en el reproductor
de Youtube incrustado.
Veamos seguidamente los dos pasos que tenemos que realizar para insertar el reproductor
VideoJS que sirva para lanzar los vídeos en los diferentes formatos admitidos en HTML595.
1. Se incluye el javascript Video.js y las hojas de estilo en el head o cabecera de la
95 La documentación de Video.js se encuentra en http://www.videojs.com/docs, que es un enlace a Github
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 465
página. Hay dos formas de usar este reproductor, una es en versión CDN (Content Delivery
Network)96 y la otra es la que utilizamos nosotros en hosdedaje propio o Self Hosted. En esta
segunda versión, el código que hay que incrustar es el siguiente, y siempre dentro del head de la
página web:
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
<script src="http://example.com/path/to/video.js"></script>
<script>
_V_.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
2. El segundo paso es el que nos va a permitir colocar los ficheros de vídeo en cada una
de las lecciones y teniendo en cuenta que insertamos el mismo vídeo en los formatos .WebM,
.MP4 y OGG Vídeo si es menester. Se trata de añadir en la parte de la página en HTML que
queramos el código correspondiente al vídeo:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
96 Esta versión es para los desarrolladores que quieren crear un red de transmisión de contenido.
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 466
</video>
Por lo tanto, de esa forma tan sencilla se puede implementar en HTML5, sin necesidad de
usar Flash Vídeo, el vídeo educativo correspondiente, sin tener que incrustarlo desde otros
servicios; es decir, dejando el vídeo en los formatos comentados dentro del servidor propio.
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 467
Conclusiones
El reproductor VideoJS es un excelente recurso para implementar vídeos en la plataforma de
elearning Chamilo. VideoJS ofrece al usuario una correcta visualización de los videos en
diferentes navegadores y plataformas como aquellas que correspnden a los telefonos móviles o
tablets al no requerir la utilización de Adobe Flash para ver correctamente el contenido de los
videos. Además de ello, si el navegador del usuario que intenta ver el vídeo no soporta HTML5,
automáticamente puede mostrar un reproductor en Flash alternativo, haciendo un fallback.
IKASNABAR 2013 - OPEN EDUCATION AND TECHNOLOGY 468
Referencias
Bräunlich, Philip y Van Aaken, Gerrit (2013). HTML5 Video Player Comparison.
<http://praegnanz.de/html5video> (Consulta: 20/V/2013).
Herrera Ríos, E. (2012). Arrancar con HTML5. Curso de programación. Barcelona: Marcombo.
Libby, A. (2012) HTML5 Video How-To. Birmingham, Reino Unido: Packt Publishing
Long Tail Video (2013). The State of HTML5 Video, <http://longtailvideo.com/html5> (Consulta:
8/VI/2013)
Shupe, Rich (2012). The top five cross-platform video players.
<http://www.netmagazine.com/features/top-five-cross-platform-video-players>
(Consulta: 20/V/2013)