reproductor html5 responsive para blogger reproductor de video para blogger

Ver en Github

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

Para empezar, busca en tu proyecto la etiqueta <head> y abajo de eso pega el siguiente codigo:


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

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


<script src="https://cdn.plyr.io//plyr.js"></script>

También puedes optar por la versión que contiene polyfills para navegadores que no soportan ES6:


<script src="https://cdn.plyr.io//plyr.polyfilled.js"></script>

Por último inicializa Plyr agregando después del código anterior lo siguiente:


<script>//<![CDATA[
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
//]]></script>

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 también 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:


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

Por lo tanto la id del video seria PZbkF-15ObM, ahora solo lo especificamos en un elemento HTML mediante el atributo data-video-id de la siguiente manera:


<div class="js-player" data-plyr-embed-id="PZbkF-15ObM" data-plyr-provider="youtube"></div>

Ahora podemos controlar el reproductor de youtube con plyr, aunque el logo de youtube seguirá apareciendo. El ejemplo del código anterior es el siguiente:



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

Por lo tanto, la id es 247535042, ahora solo la agregamos en el siguiente código:


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

Aquí un ejemplo del código anterior:



Enlace directo

Evidentemente podemos usar enlaces directos a nuestros archivos multimedia. Si no tienes un lugar para alojarlos, puedes usar Onedrive o Google Drive. El código necesario es el siguiente:


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

También podemos especificar formatos alternativos, por ejemplo, webm es un formato de gran calidad y muy poco peso, pero poco soportado, 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 permite especificar la imagen de "vista previa" y playsinline evita que plyr sea reemplazado por el reproductor nativo de IPhone con Mobile Safari. El ejemplo del código es 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' 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

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>

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