Cara Membuat Video Player dengan Plyr

 Player atau yang biasa disebut pemutar media adalah istilah umum untuk mengacu kepada software komputer yang dapat memainkan berkas Multimedia. 

Kebanyakan pemutar media dapat memainkan berkas audio maupun video. 

Pemutar media yang memfokuskan pada audio atau video disebut pemutar audio dan pemutar video. 

Pernahkah kamu melihat sebuah website yang dapat memutar video maupun audio dengan menekan tombol play?. 

Kali ini saya akan memberikan tutorial yang mungkin sangat berguna untuk kalian yang ingin membangun website atau blog anime, film, atau hanya sekedar ingin memunculkan dan memutar sebuah media. 

Plyr adalah bahasa pemrograman HTML5 tanpa dependensi, sederhana, sangat mudah di akses, dan pastinya mudah untuk di sesuaikan. 

Plyr ini sangatlah mirip dengan kerangka kerja yang biasa disebut VideoJS, yang memenuhi fungsi yang sama dan juga Kompatibel dengan browser versi lama. 

Namun untuk Plyr yang satu ini, memiliki fitur tampilan yang sangat memuaskan nahi para penggunanya. 

Untuk kalian yang ingin melihat Demo atau Contoh silahkan tekan Link di bawah ini. 

Demo Contoh

Cara Membuat Video Player dengan Player

- Pertama, silahkan tempelkan pemanggilan CSS ini di atas kode </head> pada Tema atau Template kalian

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

- Kedua, silahkan 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 tinggal memasuki tahap pembuatan atau embed video untuk di tampilkan pada website atau blog kalian. 

Embed Type Video dengan Direct Link atau Tautan Langsung

Apabila anda menggunakan hosting lain, kalian dapat menggunakan tautan langsung atau direct link dari file multi media. 

Jika kalian tidak memiliki tempat untuk menghostingnya, kalian dapat menggunakan layanan gratis seperti  OneDrive, Google Drive, dan lainnya. 

Untuk kode yang diperlukan silahkan lihat di bawah ini. 

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

Embed Code Video YouTube

Bagaimana jika menggunakan tautan YouTube? Kalian hanya tinggal copy ID link pada video youtubenya. 

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

Silahkan hapus atau ganti kode yang saya tebalkan.

Sekian postingan dari saya Cara Membuat Video Player dengan Player. 

Sekiranya dari kalian masih ada yang bingung, silahkan komentar pada kolom di bawah yang sudah di sediakan. 

Apabila ada kesalahan penulisan maupun penjelasan, saya mohon maaf sebesar-besarnya. Terimakasih sudah berkunjung di website kami. 

Muhammad Puttra

Gunakan Media Sosial Dengan Benar Agar Bermanfaat :) Follow IG : puttra.id

Facebook

WhatsApp

Instagram

Bagikan Artikel ini