Reproductor html5 de audio y video con Plyr

reproductor html5 responsive para blogger reproductor de video para blogger

En esta ocacion les quiero recomendar Plyr, un reproductor HTML5 sin dependencias (vanilla js), sencillo, rápido y personalizable. Anteriormente ya habia hablado sobre un framework llamado videojs, el cual cumple la misma funcion y ademas es compatible con navegadores viejos.


Compatibilidad

Al dia de hoy no es necesario darle soporte a navegadores antiguos ya que actualmente HTML5 y sus elementos (en este caso, audio y video) se encuentran estandarizados, sobre todo por los dispositivos móviles ya que es seguro y ligero.


Los reproductores de videos en HTML5 son superiores a swf, nos permite lograr un buen rendimiento y brindar la mejor experiencia para el usuario, ya sea en PC o Smartphones.


Instalar

Como ya es costumbre, este tipo de aportes sirve para cualquier plataforma, simplemente tomo de referencia blogger, asi que vamos a ir a Temas, presionamos "Editar html", buscan <head> y abajo de eso pegan esto:


<link rel="stylesheet" href="https://cdn.plyr.io/2.0.18/plyr.css"/>

Por último vamos a incluir plyr.js arriba de </body> y luego llamar a plyr.setup(), para ello pega el siguiente codigo:


<script src="https://cdn.plyr.io/2.0.18/plyr.js"></script>
<script>//<![CDATA[
plyr.setup(document.querySelectorAll('.js-player'));//]]></script>

Y listo. En el caso de blogger, si solo deseas cargar el reproductor en las entradas, podemos ahorrarnos datos en la página principal si hacemos uso de condicionales b:if.


Usar con audio

Esta es una de las características incluidas en Plyr, ya que si solo queremos audio lo podemos hacer sin problemas, para ello el código necesario sería el siguiente:


<audio class='js-player' controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

También podemos especificar varios formatos. Normalmente mp3 es el más soportado, pero en cuanto a calidad y peso recomiendo ogg, asi que podemos especificar ambos con el fin de que el navegador elija el más recomendado:


<audio class='js-player' controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
</audio>

Aqui un ejemplo del reproductor con un archivo de audio que he subido a onedrive, aunque también puedes obtener el enlace directo desde Google Drive, esto es a eleccion de ustedes:



Usar con Youtube

Plyr tambien nos sirve como reemplazo al código para insertar videos de youtube. Lo importante es obtener la id del video, la cual se encuentra después de ?v=, por ejemplo, vamos a tomar el código del siguiente enlace:


https://www.youtube.com/watch?v=PZbkF-15ObM

Por lo tanto la id del video seria PZbkF-15ObM, ahora solo le especificamos en un <div/> vacio mediante el atributo data-video-id de la siguiente manera:


<div class='js-player' data-type="youtube" data-video-id="PZbkF-15ObM"></div>

Lo que Plyr hará será insertar el video de youtube, pero controlado completamente por el reproductor que hemos instalado, aunque el logo de youtube seguirá apareciendo. Aqui el ejemplo del código anterior:



Usar con Vimeo

El principio es el mismo que con youtube, solo debemos obtener la id del video en vimeo. Como ejemplo vamos a extraerla del siguiente enlace:


https://vimeo.com/247535042

La id vendria a ser 247535042, como se puede notar es mas sencillo que en youtube. Ahora solo agregamos esa id utilizando el siguiente código:


<div class='js-player' data-type="vimeo" data-video-id="247535042"></div>

En este caso, no se muestra ningún logo correspondiente a vimeo, lo que nos resulta más estético porque lo controlaremos desde Plyr. Aquí un ejemplo del código anterior:



Video de enlace directo

Por último y como es de esperarse, también podemos hacer uso de enlaces directos hacia nuestros archivos multimedia. Si no tienes un lugar para alojarlos, puedes hacer uso de Onedrive o Google Drive. El código necesario sería el siguiente:


<video class='js-player' poster="thumbnail.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Podemos especificar distintos formatos para que el navegador elija el que le provee mejor rendimiento. Webm es un forma de video con gran calidad y de muy poco peso, sin embargo aun no lo soportan todos los navegadores, asi que dejaremos una alternativa:


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

El atributo "poster" nos permite especificar la imagen de "vista previa" que se mostrara hasta que demos clic en "play". El ejemplo del código anterior sería el siguiente:



Atajos

El reproductor también es compatible con atajos mediante el teclado. En la siguiente tabla les dejo los que estan disponibles hasta el momento, así como su función:


0 al 9 Busca del 0 al 90% del vídeo.
espacio, K Alterna entre pausar y reproducir.
, Busca hacia atrás y hacia adelante en el video.
, Aumenta y disminuye el volumen respectivamente.
M Mutea o activa el sonido.
F Pantalla completa.
C Activa o desactiva subtitulos.

Opciones

Aunque es un reproductor ligero y sencillo, cuenta con muchas opciones que se deben pasar como un objeto en setup();, o mediante el atributo data-plyr en formato JSON.


<video data-plyr='{ "title": "Video de prueba", "volume": 10, "blankUrl" : "blank.mp4"}'></video>

Para saber mas de ello y sobre su api, les recomiendo consultar el readme.md desde el repositorio en github.


Eso ha sido todo de momento amigos, cualquier duda dejenla en los comentarios y si te ha sido util este articulo no olvides compartir. Más adelante actualizaré esta entrada con un skin desarrollado por mi para Plyr.

Suscribete para recibir los nuevos aportes en tu correo.