Cara Membuat Audio/Video Player dengan Plyr

Player atau pemutar media adalah istilah umum untuk mengacu kepada software komputer yang dapat memainkan berkas multimedia. Kebanyakan pemutar media dapat memainkan berkas audio dan video. Pemutar media yang memfokuskan pada audio atau video disebut pemutar audio dan pemutar video.

Pernahkah kalian melihat sebuah website yang dapat memutar video maupun audio dengan menekan tombol play? Kali ini saya akan sedikit membagikan tutorial yang mungkin berguna untuk kalian yang ingin membangun web/blog anime, film atau hanya sekedar ingin memunculkan dan memutar suatu media, mungkin bisa di katakan Streaming "mungkin".

Plyr adalah bahasa pemrograman HTML5 tanpa dependensi, sederhana, mudah di akses, 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.

Cara Membuat Audio/Video Player di Web dengan Plyr

• Pertama, tempelkan pemanggilan css ini di atas kode </head> pada tema / template kalian.

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

• Kedua, tempelkan kode javascript ini di atas kode </body> juga

  <script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>
  <script>/*<![CDATA[*/const player = new Plyr('#player');/*]]>*/</script>

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

Embed Type Audio

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

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

Punya kalian berbeda format? Santai saja, kalian juga bisa menggunakan format.ogg .wav atau sejenisnya. Lagipula file kalian di upload di hosting berbeda juga tidak masalah. hehehe Tapi admin tetap akan memberikan contoh penggunaan format lain jadi santai saja.

<audio id='player' controls>
  <source src="LINK audio.mp3" type="audio/mp3">
  <source src="LINK audio.ogg" type="audio/ogg">
  <source src="LINK audio.wav" type="audio/wav">
  <source src="LINK audio.(silahkan diisi dengan ekstensi file di akhir judul file kalian)" type="audio/ (silahkan diisi dengan ekstensi file di akhir judul file kalian)">
</audio>

Embed Type Video dengan tautan langsung

Apabile menggunakan hosting lain, kalian dapat menggunakan tautan langsung dari file multimedia apabila tidak memiliki tempat untuk menghostingnya, Kalian dapat menggunakan layanan gratis seperti Onedrive, Google Drive dan Terserah. Kode yang diperlukan adalah sebagai berikut:

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

Jika kalian ingin menggunakan subtitle pada video? silahkan gunakan kode di bawah ini.

<video class='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? Kalian hanya tinggal copy ID link pada video youtubenya saja contoh ?V=ID Youtube, akan mengambil kode dari tautan berikut :

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>

Sekian dulu posting dari saya. sekiranya masih bingung, silahkan komentar pada kolom komentar yang tersedia, kita carikan masalah itu bersama. Dikarenakan admin disini juga masih belajar, apabila ada kesalahan pada penulisan maupun penjelasan, saya mohon maaf. Terimakasih telah berkunjung.