HTML5 Video en la Plataforma de E-learning Chamilo de...

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

http://metaunibertsitatea.com/

http://metauniversidad.com/


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


templates and a HTML5 Video player is needed. The VideoJS player was the final choice for

implement the process.

Keywords: HTML5, video, Chamilo, codecs


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/


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


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


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

http://longtailvideo.com/html5


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


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


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

http://www.videojs.com/docs


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.


</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.


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.


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)

http://www.netmagazine.com/features/top-five-cross-platform-video-players

http://longtailvideo.com/html5

http://praegnanz.de/html5video

HTML5 Video en la Plataforma de E-learning Chamilo de...

Documents

Transcript of HTML5 Video en la Plataforma de E-learning Chamilo de...