Cara Membuat Audio/Video Player di Blog dengan Plyr

Dezign Desu - Web Streaming ataupun Blog Streaming, yah... player ini memang paling cocok di peruntukan web Streaming. Jadi berbahagialah kalian yang mempunyai web streaming, karena telah menjumpai posting Dezign Desu yang satu ini (bercanda). Ok, langsung saja ke tahap penjelasan & seterusnya.

Plyr adalah bahasa pemrograman HTML5 tanpa dependensi, sederhana , dapat diakses , dan dapat disesuaikan. Plyr ini sangat mirip dengan kerangka kerja yang disebut videojs , yang memenuhi fungsi yang sama dan juga kompatibel dengan browser lama. namun untuk Plyr yang satu ini, memiliki fitur tampilan yang sangat memuaskan bagi para penggunanya.

Saat ini tidak diperlukan untuk mendukung browser lama karena HTML5 dan elemen-elemennya (dalam hal ini, audio dan video) distandarisasi , terutama oleh perangkat seluler ; HTML5 lebih aman. Sebuah audio atau video di HTML5 jauh lebih unggul yang didasarkan pada swf , kinerja tinggi dan pengalaman pengguna yang baik pada PC atau Smartphone.

Kali ini Dezign Desu akan membuat tutorial membuat player

Pertama, kita perlu tempelkan pemanggilan css ini di atas kode </head> :

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

Kedua, tempelkan kode javascript ini 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>

Ok sip.. Sekarang kalian akan memasuki tahap pembuatan / embed video maupun mp3 untuk di munculkan pada website/blog kalian.

Embed Type Audio

Salah satu fitur pada Plyr adalah memungkinkan Sobat untuk mengontrol kecepatan tempo audio, untuk itu kode yang diperlukan adalah yang berikut :

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

Punya kalian berbeda format? Santai saja, kalian bisa menggunakan format.ogg pada embed file milik kalian. Lagipula file kalian di upload di hosting berbeda juga gak masalah. hehehe
Tapi admin tetap akan memberikan contoh penggunaan format .ogg jadi santai saja.

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

Embed Type Video dengan tautan langsung

Nah, ini jika kalian menggunahan hosting lain. Kalian dapat menggunakan tautan langsung dari file multimedia. Jika Sobat tidak memiliki tempat untuk menghostingnya, Kalian dapat menggunakan layanan gratis seperti Onedrive Google Drive dan Firebase. Kode yang diperlukan adalah sebagai berikut:

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

Video ga muncul subtitle, padahal seharusnya ada? Slow aja bro, admin juga sedah menyediakan solusinya.

<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 code video youtube
Bagaimana jika menggunakan tautan youtube? Santai post ini belum berahir. Kalian hanya tinggal copy ID link pada video youtubenya saja contoh ?V=ID Youtube, misalnya, kita akan mengambil kode dari tautan berikut, tan penempatan linknya juga masih sama seperti yang di atas :

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

Bagaimana ? bagus bukan? buruan tunggu apalagi segera terapkan di blog/website kamu sekarang juga. Jika ada kesulitan di dalam tutorial ini tinggalkanlah komentar, InsyaAllah akan saya jawab secepat mungkin & sebisa mungkin.

Sekian dulu posting dari saya. kiranya masih bingung, silahkan komentar pada kolom komentar yang tersedia, sebisa mungkin admin akan membantu masalah kalian mengenai tutorial di posting Cara Membuat Audio/Video Player di Blog dengan Plyr.
Jika tutorial imi memang berguna, jangan lupa di share ya...
Maaf admin juga masih tahap belajar, jadi kita belajar bersama saja bila masih kurang faham, heheheh