Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Plyr merupakan pemutar media HTML5, YouTube, Vimeo sederhana yang bisa digunakan untuk membuat player audio dan video disebuah website dengan mudah, ringan, dapat disesuaikan dan mendukung browser modern.

Sebuah pemutaran audio atau video di html5 jauh lebih unggul karena kinerjanya yang tinggi dan pengalaman pengguna yang baik pada perangkat PC ataupun Smartphone.

Jika kamu pengelola blog streaming mungkin sudah tidak asing dengan kode videojs. Ya, Plyr sangat mirip dengan kerangka kerja videojs, dimana memenuhi fungsi yang sama dan juga kompatibel dengan browser lama. Namun Plyr memiliki fitur tampilan yang sangat memuaskan bagi para penggunanya.

Jika kamu sedang mencari cara bagaimana membuat sebuah pemutaran audio ataupun video secara online, Plyr bisa sangat diandalkan untuk itu. Tapi bagaimana cara menerapkan Plyr di sebuah blog? Pada postingan kali ini saya akan berbagi tutorial bagaimana membuat media player audio atau video untuk blog menggunakan kode Plyr ini.

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Di HTML5 untuk bisa memutar audio atau video secara online di dalam website adalah dengan menggunakan element HTML <audio>...</audio> dan <video>...</video>. Tapi Dengan menggunakan Plyr, kita bisa mengatur options sesuai kebutuhan dengan markup yang di inginkan.

Instal Plyr di Blogger

1. Masuk ke halaman draft.blogger.com

2. Lanjut Klik Tema > klik Drop down > Edit HTML

3. Cari kode </head>, gunakan Ctrl + F mempercepat pencarian. Kemudian salin kode berikut dan letakan tepat diatasnya

   <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css"/>
   <script src="https://cdn.plyr.io/3.7.8/plyr.js" defer></script>

4. Selanjutnya yaitu memasang javascript untuk menjalankan plyr, letakan kode berikut sebelum penutup </body>

   <script>/*<![CDATA[*/
   window.addEventListener('DOMContentLoaded', () => {
     const players = Array.from(document.querySelectorAll('.plyr-js')).map((p) => new Plyr(p,{
       youtube: { noCookie: true },
       i18n: {
         quality: 'Kualitas',
         speed: 'Kecepatan',
         captions: 'Teks',
         disabled: 'Nonaktif',
         enabled: 'Aktif',
       },
     }));
   });/*]]>*/
   </script>

   Kamu dapat menyesuaikan i18n terjemahan tombol ke bahasa yang inginkan

5. Jika sudah selesai, Klik Simpan

Kamu juga bisa memilih versi yang berisi polyfill untuk browser yang tidak mendukung ES6.

<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>

Instal Plyr di Wordpress

Untuk menambahkan kode pada WordPress dilakukan dengan cara edit file header.php atau footer.php. Untuk edit file tersebut dilakukan melalui halaman Dashboard admin WordPress, berikut langkahnya :

1. Buka menu Appereance > Theme Editor > Theme Header

2. Cari kode </head>, lemudian salin kode berikut dan letakan tepat diatasnya

   <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css"/>
   <script src="https://cdn.plyr.io/3.7.8/plyr.js" defer></script>

3. Jika sudah, klik Simpan atau Update File.

4. Selanjutnya yaitu memasang javascript untuk menjalankan plyr, letakan kode berikut sebelum penutup </body> pada tab menu Theme Footer.

   <script>/*<![CDATA[*/
   window.addEventListener('DOMContentLoaded', () => {
     const players = Array.from(document.querySelectorAll('.plyr-js')).map((p) => new Plyr(p,{
       youtube: { noCookie: true },
       i18n: {
         quality: 'Kualitas',
         speed: 'Kecepatan',
         captions: 'Teks',
         disabled: 'Nonaktif',
         enabled: 'Aktif',
       },
     }));
   });/*]]>*/
   </script>

   Kamu dapat menyesuaikan i18n terjemahan tombol ke bahasa yang inginkan

5. Jika sudah selesai, Klik Simpan

Gunakan plugin Headers and Footers Code Snippets Wordpress untuk menerapkan kode diatas

Custom Plyr

Kamu juga dapat menyesuaikan tampilan Plyr dengan menambahkan opsi controls ke dalam javascript diatas dengan menggunakan kode berikut:

<script>/*<![CDATA[*/
window.addEventListener('DOMContentLoaded', () => {
  const players = Array.from(document.querySelectorAll('.plyr-js')).map((p) => new Plyr(p, {
    youtube: {
      noCookie: true
    },
    controls: ['play-large', // The large play button in the center
      'restart', // Restart playback
      'rewind', // Rewind by the seek time (default 10 seconds)
      'play', // Play/pause playback
      'fast-forward', // Fast forward by the seek time (default 10 seconds)
      'progress', // The progress bar and scrubber for playback and buffering
      'current-time', // The current time of playback
      'duration', // The full duration of the media
      'mute', // Toggle mute
      'volume', // Volume control
      'captions', // Toggle captions
      'settings', // Settings menu
      'pip', // Picture-in-picture (currently Safari only)
      'airplay', // Airplay (currently Safari only)
      'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
      'fullscreen', // Toggle fullscreen
    ],
    i18n: {
      quality: 'Kualitas',
      speed: 'Kecepatan',
      captions: 'Teks',
      disabled: 'Nonaktif',
      enabled: 'Aktif',
    },
  }));
});/*]]>*/
</script>

Kamu dapat mempelajari dokumentasi kontrol plyr di tautan referensi di bawah artikel ini.

Cara Menggunakan Plyr

Selanjutnya yaitu cara menggunakan plyr di blog untuk menyematkan video atau mp3, untuk caranya tergantung sesuai keinginan, tetapi saya akan memberikan beberapa metode yang akan dibahas.

Dengan Plyr.js kamu bisa menerapkan audio atau video html5, youtube dan vimeo. Nah, untuk caranya kamu bisa ikuti tutorial berikut ini.

Embed YouTube dengan Plyr

Plyr dapat digunakan sebagai pengganti kode embed iframe untuk memasukkan video youtube di blog, Yang penting adalah kamu memiliki ID VIDEO YOUTUBE yang ditemukan setelah watch?v=, contohnya

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

Nah, link yang diblok merupakan ID video youtube, sekarang kamu bisa menerapkan menggunakan kode berikut dan menempatkan ID video tersebut kedalam atribut data-plyr-embed-id.

<div class="plyr-js" data-plyr-embed-id="PZbkF-15ObM" data-plyr-provider="youtube"></div>

Atau dengan <iframe> yang dapat di Kustomisasi, kodenya sebagai berikut :

<div class="plyr-js">
  <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay" ></iframe>
</div>

Embed Vimeo dengan Plyr

Caranya yaitu mendapatkan terlebih dahulu ID video Vimeo, caranya sama seperti diatas tadi, sebagai contoh link video vimeo berikut :

https://vimeo.com/40648169

Nah, link yang diblok merupakan ID video vimeo, sekarang kamu bisa menerapkan menggunakan kode berikut dan menempatkan ID vimeo tersebut kedalam atribut data-plyr-embed-id dan pastikan nilai atribut data-plyr-embed-id adalah vimeo.

<div class="plyr-js" data-plyr-provider="vimeo" data-plyr-embed-id="247535042"></div>

Atau dengan <iframe> yang dapat di Kustomisasi seperti kode YouTube diatas :

<div class="plyr-js">
  <iframe src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency  allow="autoplay" ></iframe>
</div>

Audio HTML5

Hal baru yang ada di versi 3.0 dari Plyr adalah memungkinkan kamu untuk mengontrol kecepatan pemutaran audio, Kamu bisa menggunakan tag audio HTML5 dengan menambahkan class plyr-js sesuai dengan pada javascript.

<audio class="plyr-js" controls>
  <source src="https://.../audio.mp3" type="audio/mp3">
</audio>

Kamu juga bisa menentukan berbagai opsi lainnya dan format seperti ogg dan vaw, sesuai dengan tag audio HTML5.

<audio class="plyr-js" controls>
  <source src="https://.../audio.mp3" type="audio/mp3">
  <source src="https://.../audio.ogg" type="audio/ogg">
  <source src="https://.../audio.wav" type="audio/wav">
</audio>

Berikut adalah contoh pemutar audio dengan file audio yang telah saya unggah ke Google Drive, kamu bisa melihat artikel cara mendapatkan link tautan langsung google drive.

Video HTML5

Plyr bisa memutar video dengan tautan ke file multimedia dengan tautan secara langsung.

Jika kamu tidak memiliki layanan hosting untuk menyimpan file media, kamu bisa menggunakan Google drive, Github, OneDrive atau penyimpanan cloud lain sebagai tempat hosting video atau audio.

Lalu kode untuk menerapkan pemutaran video, menggunakan tag video HTML5 asli dan semua opsinya seperti berikut:

<video class="plyr-js" poster="thumbnail.jpg" playsinline controls>
  <source src="https://.../video.mp4" type="video/mp4">
</video>

Kamu juga bisa melakukan kustomisasi dengan menambahkan opsi seperti format dan resolusi video, poster dan subtitle.

Memasang Subtitle

Kamu juga bisa memasang subtitle video, karena plyr mendukung subtitle WebVTT, caranya yaitu menambahkan tag track yang menentukan bahasa dan sumber file. Contoh kodenya akan seperti berikut

<video class="plyr-js" poster="thumbnail.jpg" controls playsinline crossorigin>
  <source src="video.mp4" type="video/mp4">
  <!-- Subtitle -->
  <track kind="captions" label="English" srclang="en" src="captions_en.vtt">
  <track kind="captions" label="Indonesia" srclang="id" src="captions_id.vtt" default>
</video>

Jika subtitle dan video dihosting di server yang berbeda, kamu perlu menentukan atribut crossorigin, jika tidak maka subtitle tidak akan muncul.

Kualitas Video

Untuk menentukan opsi kualitas, kamu perlu menambahkan tag HTML5 source, dengan atribut size"=quality", dimana quality diganti dengan kualitas video, contohnya:

<video class="plyr-js" poster="thumbnail.jpg"  controls playsinline>
  <!-- kualitas video -->
  <source src="https://.../video_576p.mp4" size="576" type="video/mp4">
  <source src="https://.../video_720p.mp4" size="720" type="video/mp4">
  <source src="https://.../video_1080p.mp4" size="1080" type="video/mp4">
</video>

Shortcuts

Plyr juga memiliki beberapa pintasan shortcut dengan menekan tombol keyboard. Pada tabel berikut beberapa yang tersedia sejauh ini, beserta fungsinya:

Penutup

Nah itu tadi cara memasang pemutar audio dan video Plyr untuk blog. Semoga artikel ini bermanfaat, silakan tinggalkan komnetar untuk berdiskusi.