Reproductor Videojs en Javascript y HTML5 para instalar en la web

Videojs es una plataforma que nos ofrece un reproductor que utiliza Javascript y HTML5 para su funcionamiento compatible con diversas plataformas.

Reproductor Video.js Javascript y HTML5 - Portada

➕Tabla de contenidos

Utilizado por grandes webs como IGN, LinkedIN y Theguardian. Videojs nos ofrece un reproductor de video en HTML5 totalmente customizable compatible con plataformas web como Blogger, Wordpress, Joomla y muchas más.

¿Qué es Videojs?

Video.js es una biblioteca de código abierto para trabajar con vídeo en la web, también conocida como reproductor de vídeo HTML.

Brightcove es el principal patrocinador del proyecto, emplea a muchos de los miembros principales e invierte miles de horas de ingeniería cada año en complementos de video.js y video.js plugins.

Brightcove Player se basa en video.js y se utiliza en miles de sitios web de video, lo que garantiza que video.js pueda manejar los casos de uso más profesionales.

Instalar el reproductor de video utilizando Javascript y HTML

Nos dirigimos a la Edición HTML de nuestra plataforma y agregamos los siguientes códigos antes de la etiqueta </head>

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

  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
Ya solo restaría tener una imagen para agregar como thumbail y el video en formato MP4 o Webm que agregaremos en el post con el siguiente código:

<video id='my-video' class='video-js vjs-fluid' controls preload='auto'  poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='MY_VIDEO.mp4' type='video/mp4'>
    <source src='MY_VIDEO.webm' type='video/webm'>
  </video>

  <script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
De este código configuramos:

MY_VIDEO_POSTER.jpg = URL de la imagen thumbail para el video
MY_VIDEO.mp4 = URL del video en formato MP4
MY_VIDEO.webm = URL del video en formato webm

No es necesario subir los dos formatos para que el reproductor funcione, pero si es recomendado. En el caso de que utilices solo uno borra la linea del que no utilices.

Nota a considerar en la instalación

El script que va en el post, no es necesario ponerlo siempre en cada publicación te puedes dirigir a </body> y copiar el script antes de esa etiqueta. Ahora agregarías a tu post solo el código HTML <video>.

Demostración del video en funcionamiento

Bueno si hicieron todo correctamente el reproductor debería quedar así



Utilizar con audio

También podemos reproducir archivos OGG y MP3 con este reproductor a través de el siguiente código:

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

Demostración del audio


Beneficios de instalar Video.js en tu sitio WEB

Al ser un reproductor de código abierto, Video.js nos ofrece la opción de editar al máximo su reproductor hasta cambiar su aspecto por defecto totalmente.

En cuanto a las opciones de Skin ellos nos ofrecen la versión el skin tipo youtube (modelo antiguo), Netflix (modelo web) y el que funciona con Flash, aunque no recuerdo este último ya que HTML5 es más rápido y más utilizado por lo navegadores. Estos skin son gratuitos, pero también existen los premium 😜.

Por otra parte también posee un repertorio de Plugins inmenso que va desde agregar un simple boton de descarga hasta analitycs de tus vídeos de verdad esta grueso 💪. Además es compatible con enlaces de Youtube y Vimeo.

Contras

  • Si quieres tener un diseño propio debes tener conocimiento en HTML, CSS y JS.
  • Cada vez que agregues un plugin debes agregar un JS a tu body lo que puede ralentizar la carga de tu web.
  • Necesitas subir los plugins a tu servidor para obtener la URL directa.

Conclusión

Un reproductor sin duda con mucho por ofrecer y con dos caminos como lo veo. El primer camino sería para quienes no tengan muchos conocimiento de HTML, JS y CSS que utilizaria lo básico que es, compartir videos en formato .mp4 o .webm.

El segundo sería los que conocen estos lenguajes y ahí solo el cielo es el límite, pero la primera opción para armarse un web de series de dibujos animados en linea o anime de estos que duran unos 30 minutos, no esta mal 😄, además en wordpress puedes descargar el plugin desde el directorio.

Bueno aprendicesWEB hasta aquí dejo el reproductor video.js una buena alternativa. Recuerda que compartir o comentar me ayuda y da ánimos a seguir creando contenido. Saludos ✌

Comentarios

  1. como agrego videos de youtube

    ResponderEliminar
    Respuestas
    1. En su repositorio puedes ver el código que te ayudara a utilizar los videos de Youtube, aunque necesitaras un hosting donde alojar el JS.

      Te dejo el enlace: https://github.com/videojs/videojs-youtube

      Eliminar
Estas cordialmente invitado a compartir tu ideas y comentarios.