video html5 reproductor video html5 reproductor

Repositorio Fork

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 crear un reproductor personalizable y multiplataforma. Utilizado por empresas como Microsoft, instagram, IGN, twitter, entre otros.


Instalar

Primero necesitamos incluir el archivo css arriba de </head>. En este aporte usaré como referencia Blogger. Nos vamos a Temas > Editar html", buscamos y abajo de eso pegamos lo siguiente:


<link rel="stylesheet" href="https://vjs.zencdn.net/7.3.0/video-js.css"/>

Por incluye video.min.js arriba de </body> pegando el siguiente código:


<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

Inicializar Video.js

Método 1

La primera forma de hacerlo es creando una etiqueta video con el atributo data-setup, dentro de este atributo puedes especificar las opciones del reproductor en formato json, similar a plyr.js:


<video class="video-js" controls data-setup="{}" preload="auto" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Método 2

También puedes iniciar videojs desde javascript basado en la id de la etiqueta video:


var player = videojs('mi-video');

Por supuesto, con este metodo tambien puedes pasarle opciones al reproductor:


var options = {};
var player = videojs('mi-video', options, function onPlayerReady() {
  this.play();
});

Y Listo, videojs se iniciara siempre que agregues el código del reproductor HTML5, con cualquiera de los dos métodos.


Usar con audio

Aunque es posible utilizar video.js con la etiqueta de audio, yo no lo recomiendo puesto que su aspecto será el mismo que para un video, además si no quieres ver un fondo negro, necesitarás agregar una imagen. El código es el siguiente:


<audio class="video-js vjs-fluid" controls data-setup='{}' preload="auto" poster="thumbnail.jpg">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
</audio>

Aquí un ejemplo de como se veria el reproductor con un archivo de audio que he subido a onedrive. También puedes crear enlace directo desde Google Drive:



Usar con video

La principal razón de videojs son los videos con el reproductor html5. Solo necesitamos enlaces directos a nuestros archivos multimedia aunque también puedes hacer uso de Onedrive o Google Drive para subir videos. El código necesario sería el siguiente:


<video class="video-js vjs-fluid" data-setup='' controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

El atributo poster nos permite especificar la "vista previa", "controls" inicia los controles y he agregado la class vjs-fluid porque convierte el reproductor en responsive. El ejemplo del código anterior es el siguiente:



Personalizar con Skins

Otra de las cualidades más interesantes de usar un reemplazo al reproductor html5 del navegador es la personalización. Aunque Video.js 7.x.x ya no es compatible con el generador de skins, he creado un repositorio donde estoy diseñando skins para video.js 7. Este sería un ejemplo con el skin de Twitter:



Si usas video.js y quieres tener este skin, simplemente agrega el siguiente código debajo de video-js.css, es decir, después del codigo css de video.js:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieIabel/videojs-skins@1/dist/videojs-twitter.min.css"/>

Iré diseñando mas skins a futuro con estilos alternativos para cada uno, pero por ahora no prometo nada porque mi tiempo libre es muy limitado.


Conclusión

Videojs es la opción perfecta si necesitas crear un reproductor HTML5 personalizable que goce de un gran repertorio de plugins y opciones. Si deseas más información consulta la documentación de Videojs.


También te recomiendo revisar mi entrada sobre Plyr, otro reproductor basado en HTML5 que recomiendo mucho y que además uso.