Plyr es un reproductor diseñado con html5 y java script, puedes personalizarlo a tu manera siempre y cuando tengas conocimientos básicos de html, css y java script. Plyr es compatible con todos los navegadores actuales.
1: Vamos a proceder a instalar el reproductor en un sitio de blogger tu lo puedes instalar en cualquier sitio web.
Nos vamos a la parte de blogger que dice temas y damos clic en editar html y con las teclas Ctrl + F nos aparecerá un pequeño cuadro de búsqueda ahi vamos a buscar la etiqueta <head> abajo de esa etiqueta pegamos el siguiente codigo.
<link rel="stylesheet" href="https://cdn.plyr.io/3.2.0/plyr.css"/>
2: En el segundo paso vamos a instalar el script para ello igualmente nos vamos a ir a editar html y con las teclas Ctrl + F en el buscador vamos a buscar la etiqueta </body> y arriba vamos a pegar el siguiente código.
<script src="https://cdn.plyr.io/3.2.0/plyr.js"></script>
<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>
3: Bueno con esto tenes instalado lo que seria los estilos css y los java script lo que nos hará toda la magia esta en la clase .js-player, por eso es necesario que hagas todo tal y como te lo enseño en el tutorial.
4: Vamos a usar el reproductor en youtube, para poder verlo vamos a usar el siguiente código
<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="PZbkF-15ObM"></div>
Debemos copiar el id del vídeo de youtube que queremos poner en el reproductor, debemos copiar lo que esta después de v?= ejemplo de una url de yotube https://www.youtube.com/watch?v=VTQ5yZnQOPs lo que esta en rojo es el id y es lo que demos copiar y pegar donde dice data-plyr-embed-id="PZbkF-15ObM" lo que esta en azul es lo que debemos remplazar y esto quedaría así.
5: Vamos a usar el reproductor con Vimeo, para poder verlo vamos a usar el siguiente código
<div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="247535042"></div>
Debemos copiar el id del vídeo de vimeo que queremos poner en el reproductor, devemos copiar lo que esta después de vimeo.com/ ejemplo de una url de viemo https://vimeo.com/150189970 lo que esta en rojo es el id y es lo que demos copiar y pegar donde dice data-plyr-embed-id="247535042" lo que esta en azul es lo que debemos remplazar y esto quedaría así.
6: Vamos a probar el reproductor con un enlace directo de un archivo mp4 y para poder verloo vamos a usar el siguiente codigo
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
<source src="video.mp4" type="video/mp4">
</video>
Debemos copiar el enlace de nuestro archivo mp4 y pegarlo donde dice src="video.mp4" lo que esta en rojo es lo que debemos remplazar por el enlace de nuestro archivo mp4 y esto nos quedaría así.
7: Vamos a probar el reproductor con audio directamente con un archivo mp3 y para poder verlo vamos a usar el siguiente código este reproductor tambien nos sirve para radio online.
<audio class='js-player' controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
Debemos copiar el enlace de nuestro archivo mp3 y pegarlo donde dice src="audio.mp3" lo que esta en rojo es lo que vamos a remplazar por el enlace de nuestro archivo mp3 y esto nos quedaría así.
Bien y hasta aquí tenemos lo mas esencial de este tutorial si quieres aprender como como poner diferentes calidades en los vídeos y como poner subtitulos dale me gusta y compartir y comentar abajo de este post.
Los conocimientos previos a este tutorial fueron adquiridos en la pagina web https://www.zkreations.com les recomiendo visitarla hay mucho contenido de calidad.
