Reproductor de audio y video html5 con Plyr

reproductor html5 responsive para blogger reproductor de video para blogger

Repositorio Fork Star

Plyr es un reproductor HTML5 sin dependencias, simple, accesible 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; HTML5 es más seguro.


Un reproductor de audio o video en HTML5 es por mucho superior a uno basado en swf, por su alto rendimiento y buena experiencia de usuario en PC o Smartphones.


Instalar

Este tipo de aportes sirve para cualquier plataforma, simplemente utilizaré como referencia Blogger. Vamos a ir a Temas > Editar html", buscamos <head> y abajo de eso pegamos lo siguiente:


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

Por último vamos a incluir plyr.js arriba de </body> y inicializar Plyr(), para ello pega el siguiente código:


<script src="https://cdn.plyr.io/3.4.5/plyr.js"></script>
<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>

Y Listo. El código anterior inicializa Plyr para todos los elementos que tengan la clase .js-player, lo que nos permite tener más de un reproductor por página.


Usar con audio

Una de las novedades de la version 3.0 de Plyr, es que ahora nos permite controlar la velocidad de reproducción en los audios, 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. En cuanto a calidad y peso recomiendo ogg, así que podemos especificar ambos con el fin de que el navegador elija el mejor:


<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. También puedes obtener el enlace directo desde Google Drive:



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-plyr-provider="youtube" data-plyr-embed-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. Aquí el ejemplo del código anterior:



Los desarrolladores de Plyr están trabajando en una alternativa para videos insertados, la cual mejorará de forma progresiva, para saber más de ello recomiendo leer la documentación.


Usar con Vimeo

Solo debemos obtener la id del video en vimeo, al igual que como lo hicimos para youtube, como ejemplo vamos a extraerla del siguiente enlace:


https://vimeo.com/247535042

La id vendría a ser 247535042. Ahora solo agregamos esa id utilizando el siguiente código:


<div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="247535042"></div>

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



Si prefieres usar la alternativa para videos insertados que mejora de forma progresiva, recomiendo leer la documentación.


Video de enlace directo

También podemos hacer uso de enlaces directos de 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 playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

Para especificar distintos formatos, solo especificamos enlaces directos hacia esas alternativas, por ejemplo webm, que es un formato de video de gran calidad y muy poco peso, pero aun no lo soportan todos los navegadores, así que conviene dejar una alternativa:


<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <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" y playsinline evita que plyr sea reemplazado por el reproductor nativo de dispositivos IPhone con Mobile Safari. El ejemplo del código anterior sería el siguiente:



Subtítulos

Plyr es compatible con subtítulos WebVTT, para ello la forma más fácil es utilizando el elemento HTML5 <track/>, por ejemplo:


<video class='js-player' poster="thumbnail.jpg" controls playsinline crossorigin>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- Subtítulos -->
  <track kind="captions" label="English" srclang="en" src="captions_en.vtt">
  <track kind="captions" label="Español" srclang="es" src="captions_es.vtt" default>
</video>

Si los subtítulos y el video se encuentran alojados en diferentes servidores, es necesario especificar el atributo crossorigin o de lo contrario no aparecerán.


Calidad

La versión 3.1.x ya es compatible con opciones de calidad para vídeos en HTML5. Para poder especificar las opciones de calidad, necesitamos agregar elementos HTML5 <source/>, con el atributo size="{quality}", en donde {quality} se reemplaza por la calidad del video, ejemplo:


<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <!-- Calidad -->
  <source src="video_576p.mp4" size="576" type="video/mp4">
  <source src="video_720p.mp4" size="720" type="video/mp4">
  <source src="video_1080p.mp4" size="1080" type="video/mp4">
</video>

Plyr detectará automáticamente las opciones de calidad especificadas en el HTML, agregando estas al menú de opciones.


Anuncios

Plyr se ha asociado con vi.ai para ofrecer opciones de monetización en los videos. La configuración es fácil, pero recomiendo revisarlo en el repositorio de Plyr.


Atajos

El reproductor también es compatible con atajos mediante el teclado. En la siguiente tabla les dejo los que están 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 subtítulos.
L Activa o desactiva la opción "Loop" o "Bucle".

Opciones

Aunque es un reproductor ligero y sencillo, cuenta con muchas opciones que se deben pasar como un objeto al constructor de Plyr 3.0, o mediante el atributo data-plyr-config en formato JSON.


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

Para saber más, recomiendo consultar el readme.md desde el repositorio en github.


Eso ha sido todo, cualquier duda dejenla en los comentarios y si te ha sido útil este articulo no olvides compartir, siempre lo agradezco mucho.

Quizás te interese