video html5 reproductor video html5 reproductor

Ver en Github

Video.js es un reproductor de video web creado desde cero y que trabaja con HTML5. Utilizado por empresas como Microsoft, instagram, IGN, twitter y mas de 400,000 sitios web alrededor del mundo.


Contenido


Instalar

Busca en tu proyecto la etiqueta <head> y debajo pega el siguiente código:


<link rel="stylesheet" href="//vjs.zencdn.net/7.6.6/video-js.min.css"/>

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


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

Modo de uso

Inicializar con HTML

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>

Inicializar con JavaScript

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


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

También puedes pasar 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.


Usar con audio

Aunque es posible utilizar video.js con la etiqueta de audio, el aspecto del reproductor será el mismo que para un video, 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>

Usar con video

Solo necesitamos enlaces directos a nuestros archivos multimedia aunque también puedes hacer uso de Onedrive o Google Drive para subir videos:


<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 la class vjs-fluid convierte el reproductor en responsive. El ejemplo del código anterior es el siguiente:



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.