Cara Membuat Video Player dengan Plyr di Blog

 

    Hiirotaku - Web Streaming atau yang bisa di kenal Blog Streaming membutuhkan yang namanya video player apa lagi pasti membutuhkan yang responsive dan ringan untuk webnya, salah satunya yaitu dengan menggunakan Player Plyr ini.

Plyr adalah bahasa pemrograman HTML5 tanpa dependensi, sangat sederhana, dapat diakses, dan dapat disesuaikan. Plyr ini mirip dengan videojs, memiliki fungsi yang sama dan juga kompatibel dengan browser lama. Perbedaan yang bisa dilihat videojs dengan Plyr adalah memiliki fitur tampilan yang sangat memuaskan bagi para pengguna.

Cara Memasang Video Player Plyr

1. Buka Halaman Blogger

2. Ke menu edit html dan copy pastekan kode dibawah ini tepat di atas kode </head>

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

3. Setelah itu tempel juga kode dibawah ini tepat di atas kode </body>

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

4. Simpan

Tahap Pembuatan Embed Video dan Audio Plyr

Embed Audio

Copy dan pastekan kode dibawah ini di halaman post kalian

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

jika format kalian berbeda dengan yang diatas, kalian bisa menggunakan kode ini

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

Embed Video

Untuk embed video kalian bisa menggunakan kode ini dan letakkan di postingan

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

Jika saat sudah selesai dan subtitle tidak muncul, coba kalian gunakan kode dibawah ini

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

Embed video dari youtube

Jika ingin menggunakan video dari youtube, kalian bisa copy saja kode dibawah ini yang saya tandai

https://www.youtube.com/watch?v=BAkSzPo0zD4

Pasti setelah kalian memasang video player plyr ini blog kalian akan semakin disenangi oleh pengunjung karena saat memuat video terasa ringan dan responsive.

Sekian tutorial singkat ini, selamat mencoba kawan.

sc : dzdesu / Background vector created by starline - www.freepik.com