Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Plyr - HTML 5 Video Audio Player

Media Player HTML 5

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

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

9 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. kang buatin tutorial lazy load adsense seperti di plus ui ini dong...
    1. kayaknya dulu kang Adhy sudah jelasin mas. coba search menggunakan defer
    2. ini defer yah?? kok ngak kedetek pagespeed insghts yah..
    3. owhh.. okok.. sy udah paham
    4. siap mas
  2. Alhamdulillah akhirnya blog kang ismet sudah diterima adsense, cerita dong kang pengalaman dari awal daftar sampai diterima.
    1. sebetulnya udah lama mas adsense saya, cuman sempet di tunda dulu https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4X58jZLWtoGgDcxSGOStmQdpRydjVSzGENByyPmwPB71YKHzVrPuZ6LM_tDnD78cmmPxf7OrUGYSLpk_nKOGMkGJei5cb6q8938wOPEv0xxarbSVSYu4FKHCNKPLb6BP5WQw9l5WH3b8ne9zC_elo_TQJIW1m7hVaM30h_U-0T6K1lrfZju7bSQK/s236/adsense.jpg
    2. Ini adsense blog ini kang? Atau adsense blog lain?
    3. blog yang dulu, dan kemarin2 ga saya pasang
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.