Como comentaba en el artículo anterior, la reproducción de vídeos bajo HTML5 no es precisamente la panacea debido a que estábamos obligados a contar con tres versiones del mismo vídeo, una por cada códec soportado por los navegadores modernos, cuyos responsables no supieron (o no quisieron) ponerse de acuerdo cuando llegó el momento de estandarizar el soporte de la etiqueta video. Aunque estas tres versiones, junto con el JPG que hace las veces de póster, se consiguen fácilmente con el script del mencionado artículo, al final triplicamos el espacio necesario para alojar los vídeos y complicamos el código para la reproducción de los mismos.
Desgraciadamente no es el único problema. Otra dificultad que se nos presenta es cómo dar soporte a aquellos navegadores que no pueden mostrar vídeos en HTML5, lo cual generalmente se resuelve presentando un reproductor en Flash. Es decir, que una de las grandes ventajas de HTML5 (prescindir de Flash) la perdemos en estos casos.
El último problema que me he encontrado es el de que cada navegador muestra en pantalla un reproductor de vídeo diferente con un estilo estético distinto. Puede que esto no parezca tan importante, pero cuando uno ha invertido en un diseño y en ofrecer la mejor de las experiencias posibles para el usuario, esta diferencia de comportamiento puede suponer un quebradero de cabeza.
El camino que he tomado en el caso de la web que estamos migrando es el de utilizar Video.js, un reproductor de vídeo HTML5 de licencia libre que resuelve los problemas mencionados: se encarga de generar automáticamente el código para las tres versiones del vídeo, incluye un reproductor Flash para los navegadores antiguos y ofrece un aspecto estético común para todos los navegadores, pudiendo incluso utilizar temas para personalizar el diseño.
Para utilizar Video.js en un proyecto web no hace falta ni siquiera descargarlo, ya que enlazaremos con él desde nuestro código. No voy a repetir las instrucciones que aparecen en su sitio web oficial, pero básicamente consisten en incluir una serie de etiquetas en las secciones head y body de nuestra web.
Aún así, si estamos utilizando un CMS, suele ser más sencillo utilizar algún módulo, extensión o plugin propio que nos ofrezca esta funcionalidad. Por ejemplo, en el caso que nos ocupa, donde estamos utilizando TYPO3, hemos elegido la extensión html5videoplayer. Una vez instalada, basta con insertar el plugin en la página en la que queremos utilizarlo y configurarlo con los vídeos a mostrar, pudiendo reproducir uno sólo o un conjunto de ellos.
En definitiva, a pesar de las dificultades y los obstáculos, HTML5 es el camino a seguir. Con las herramientas adecuadas, este camino será mucho más sencillo y apacible. Espero vuestros comentarios y experiencias con Video.js.