Reproductor HTML5 responsive usando video.js

min Image Hover 3

Página oficial Repositorio

Video.js

A lo largo de estos últimos años los reproductores flash fueron reemplazados por la alternativa en HTML5. Video.js es una librería open source que nos permite usar esta tecnología y crear un reproductor personalizable, ligero y multiplataforma. Como dato extra, Video.js es utilizado por mas de 400.000 sitios web, incluyendo a empresas como Microsoft, instagram, IGN, twitter, entre otros.


Instalar

Primero necesitamos incluir el archivo javascript y css arriba de </head> o de </body> de la siguiente forma:


<script src="http://vjs.zencdn.net/5.8.8/video.min.js"></script>
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet"/>

Ahora para iniciar el reproductor solo nos queda agregar la estructura en HTML5, reemplazando los enlaces correspondientes:


<video id="vid1" class="video-js vjs-fluid" preload="auto" data-setup='{"controls": true}'>
    <source src="mivideo.mp4" type='video/mp4'>
    <source src="mivideo.webm" type='video/webm'>
</video>

Lo importante del código anterior es la id, la class video-js y el atributo data-setup, en donde he iniciado los controles del reproductor, otra forma de iniciar las opciones (en este caso los controles) es mediante un atributo html, pero aun así el atributo data-setup es obligatorio. Para saber que opciones puedes utilizar visita la guía de opciones de videojs. También he agregado la class vjs-fluid, que convierte el reproductor en responsive.


El reproductor estará funcionando con el diseño por defecto. Si por alguna razón quieres un diseño distinto, puedes visitar la siguiente página para generar skins del reproductor. Una vez generado el skin, crea un archivo css con el código copiado y agrégalo bajo el código de videojs de la siguiente manera:


<script src="http://vjs.zencdn.net/5.8.8/video.min.js"></script>
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet"/>
<link href="custom-skin.css" rel="stylesheet"/><!-- skin -->

videojs-zelda

Recomiendo agregar el css siembre arriba de </head> para que cargue primero, y el código javascript de forma asincrónica o arriba de </body>, con el fin de lograr un mejor rendimiento. Otro punto a tener en cuenta es que video.js no soporta youtube, vimeo u otra plataforma de forma nativa, para ello es necesario usar plugins.


Si tienes pensado utilizar videojs exclusivamente con youtube o vimeo, es mejor usar el código de inserción de cada plataforma correspondiente y prescindir de videojs, ya que de todas formas cargas un iframe con el reproductor del vídeo, ademas del reproductor de videojs para hacer uso de los botones, técnicamente lo que haces es cargar 2 reproductores para un solo vídeo.


CSS Personalizado

Tienes la opción de no cargar nada del css que trae el reproductor por defecto y crear tu propio diseño, yo lo he hecho para dejar un ejemplo de esta entrada, también te facilito el css y html que escribí el cual contiene comentarios para mejor entendimiento, el video lo subí a onedrive y la fuente con los iconos la creé en fontastic:


Demostración Descargar

El diseño ya es responsive de por si, así que no es necesario la class vjs-fluid, pero si agregas la class fluid cargará una versión alternativa.


Videojs es la solución perfecta si necesitas crear un reproductor HTML5 personalizable, ligero y compatible. Si deseas mas información puedes consultar la documentación proporcionada por la misma página.