Plyr - HTML 5 Video Audio Player

Hari ini saya mencoba beberapa Player untuk HTML 5 Video, akhirnya menemukan yang lumayan keren yaitu Plyr (singkatan dari Player). Fiturnya hampir menyerupai Video Youtube.

Plyr - Media Player

Plyr ini sebetulnya lebih ke media player, karena tidak hanya Video HTML 5, tapi Video Youtube, Vimeo dan Audio. Untuk yang lainnya saya kira biasa aja, karena saya lebih tertarik ke HTML 5 Player-nya. Beberapa fitur yang saya temui diantaranya:

• Captions atau Subtitle, sayangnya hanya mendukung file dengan ekstensi .vtt dan tidak mendukung .srt
  Kita bisa memasukan beberapa Subtitle dengan berbagai bahasa (dalam video Demo saya menyertakan 3 bahasa). Seacara default CC dalam keadaan OFF, silahkan klik CC untuk mengaktifkan Subtitle
• Quality, yaitu kualitas video. Kita bisa menampilkan video dengan kualitas yang berbeda. Tapi tentunya bebeda dengan Youtube yang otomatis. Pada Plyr kita harus mengupload beberapa video dengan kualitas yang berbeda. Beberapa kualitas video hanya opsional saja.
• Speed, atau kecepatan. Ada beberapa kecepatan pemutaran yang bisa kita pilih
• Picture in Picture (PIP)
• dan lainnya...

Demo Plyr

Cara Menggunakan Plyer HTML 5 Video Player

Simpan CSS eksternal ini di atas </head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kanguis/assets@main/css/plyr.css" />

kemudian simpan JavaScript-nya di atas </body>

<script src="https://cdn.jsdelivr.net/gh/kanguis/assets@main/js/plyr.js"></script>
<script>
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('.js-plyr')).map(plyrs => new Plyr(plyrs));
</script>

Kode HTML untuk menampilkan Video

Ini adalah contoh penulisan Kode HTML yang disimpan di postingan atau halaman, jangan lupa untuk menambahkan class="js-player" pada video

<video class="js-player" controls crossorigin playsinline data-poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpu6kuO1WjrozJLabsTHSI46tB2RQI1JUHiCv8rhumPzWlL27ndEUTgaDgTE8ocb1FHZmrrwzb3Q5KN-16dP9GIgRqBhe7IvtT8aCe8kIEmLqbiHrrvhFfgoNeZDC7gu48lUgwa6eA69NPj0pzk1QxGocgLtHIptIrxoJwCTyE5aqPo2L7FBiq_BYs/s700/adipurush.png">

  <source src="https://tutorial.kang-ismet.com/vid/adipurush-360.mp4" type="video/mp4" size="360"/>
  <source src="https://tutorial.kang-ismet.com/vid/adipurush-480.mp4" type="video/mp4" size="480" />
  <source src="https://tutorial.kang-ismet.com/vid/adipurush-720.mp4" type="video/mp4" size="720" />

  <track kind="captions" label="Indonesia" srclang="id" src="https://tutorial.kang-ismet.com/vid/adipurush-id.vtt" default />
  <track kind="captions" label="English" srclang="en" src="https://tutorial.kang-ismet.com/vid/adipurush-eng.vtt" />
  <track kind="captions" label="Sunda" srclang="sn" src="https://tutorial.kang-ismet.com/vid/adipurush-sn.vtt" />

</video>

Silahkan Sesuaikan URL Poster, Video dan Subtitle. Sebetulnya untuk Subtitle opsional saja.

Youtube

Untuk menampilkan video Youtube dengan Plyr, pertama dapatkan ID Video. Contoh URL Youtube

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

maka untuk menggunakan Plyr, kodenya seperti ini

<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="CVg6Lr2hWZo"></div>

Audio

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

Opsi Lain

Banyak opsi lain yang disediakan oleh pembuat Plyer. Silahkan kunjungi dan pelajari di GitHub

Apabila ada yang perlu didiskusikan, siahkan di kolom komentar.

Source:
github.com/sampotts/plyr