Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Membuat Pemutar Audio dan Video HTML5 - 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.

Table of Contents

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.

Langkah Memasang Pemutar Audio dan Video Plyr di Blogger

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Masuk ke halaman draft.blogger.com
Lanjut Klik Tema > klik Drop down > Edit HTML
Cari kode </head>, gunakan Ctrl + F mempercepat pencarian
Lanjut Copy kode di bawah, lalu Paste tepat di atas </head>

<!-- CSS Plyr Code -->
<script type='text/javascript'>//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.7.8/plyr.css");//]]></script>

Selanjutnya yaitu memasang plyr.js, cari kode </body>
Lalu Copy dan tempelkan kode dibawah tepat diatas kode </body>

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

Terakhir Copy kode berikut tepat dibawah kode js sebelumnya

<script type='text/javascript'>
/*<![CDATA[*/
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>

Maka hasil akhirnya akan nampak seperti ini

<!--[ Script Plyr Js ]-->
<script src='https://cdn.plyr.io/3.7.8/plyr.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
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>

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>

Memasang Pemutar Audio dan Video 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 :

Buka menu Appereance > Theme Editor > Theme Header
Copy dan Paste kode di bawah tepat di atas penutup kode </head>

<!-- CSS Plyr Code -->
<script type='text/javascript'>//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.7.8/plyr.css");//]]></script>

Jika sudah jangan lupa Klik Simpan atau Update File, Selanjutnya
Buka ke tab menu Theme Footer kemudian tempelkan kode di bawah tepat di atas penutup </body>

<!--[ Script Plyr Js ]-->
<script src='https://cdn.plyr.io/3.7.8/plyr.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
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>

Jika sudah jangan lupa Klik Simpan atau Update File

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

Menyesuaikan Tampilan Plyr

Untuk dapat menyesuaikan tampilan Plyr kamu bisa ganti javascript diatas dengan menggunakan kode berikut:

<!--[ Script Plyr Js ]-->
<script src='https://cdn.plyr.io/3.7.8/plyr.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded', () => {
  const controls = [
    'play-large', // Large play button in the middle
    'restart', // Restart playback
    'rewind', // Flip search time (default 10 seconds)
    'play', // Play / pause playback
    'fast-forward', // Fast forward time (default 10 seconds)
    'progress', // The progress bar and scrubber for playback and buffering
    'current-time', // Current playback time
    'duration', // Full term media
    'mute', // Toggle silent
    'volume', // Volume control
    'captions', // Toggle captions
    'settings', // Settings menu
    'pip', // Picture in Picture
    'airplay', // Airplay
    'download', // Display a download button with a custom link to an existing resource or custom URL that you specify in your options
    'fullscreen' // Toggle fullscreen
  ];
  const player = Plyr.setup('.js-player', {
    controls
  });
  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>

Hapus elemen yang tidak inginkan kita tampilkan dengan cara merubahnya menjadi komentar.

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

Jika tahap diatas sudah selesai, selanjutnya yaitu cara menerapakan embed video atau mp3 di blog untuk ditampilkan pada website, untuk caranya sediri akan saya bahas di bawah

Cara Penerapkannya Plyr di Blog

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

Embed Audio

Hal baru yang ada di versi 3.0 dari Plyr adalah memungkinkan kamu untuk mengontrol kecepatan pemutaran di audio, untuk ini kode yang diperlukan adalah sebagai berikut:

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

Kamu juga bisa menentukan berbagai format, mp3 adalah format yang paling di dukung. Tapi jika kamu juga ingin mempertahankan kulitas, format ogg bisa menjadi pilihan untuk diterapkan juga.

Jadi kamu bisa menerapkan kedua format mp3, ogg atau vaw, dengan begitu browser akan memilih format yang terbaik.

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

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

Embed YouTube dengan Plyr

Plyr juga berfungsi sebagai pengganti kode untuk memasukkan video youtube di blog, Yang penting adalah mendapatkan ID VIDEO YOUTUBE, yang ditemukan setelahnya ?v=, contohnya

https://www.youtube.com/watch?v=MZk22ATFPTo&t=16s

Nah, link yang saya blok merupakan ID video youtube, sekarang kamu bisa menerapkan menggunakan kode berikut di dalam element html data-plyr-embed-id.

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

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

<div class="plyr__video-embed" id="player">
  <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>

Sekarang, kamu bisa mengontrol pemutaran YouTube dengan Plyr di blog, untuk hasil kode diatas akan nampak seperti halaman demo berikut.

Demo Tampilan YouTube

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/247535042

Link yang di blok tersebut adalah ID Vimeo, setelah mendapatkan nya selanjutnya yaitu menerapkannya dengan kode berikut

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

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

<div class="plyr__video-embed" id="player">
  <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>

Dan untuk hasilnya kamu bisa lihat video dibawah berikut

Demo Tampilan Vimeo

Embed Video Secara Langsung

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

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

Lalu kode untuk menerapkan pemutaran video atau audio yang di embed menggunakan tautan langsung sebagai berikut :

<video class='js-player' controls>
  <source src="video.mp4" type="video/mp4">
</video>

Kamu juga bisa kustomisasi menambahkan format video lain, sepeti webm untuk kualitas video yang tinggi, maka kode nya akan seperti ini

<video class='js-player' poster="thumbnail.jpg" controls playsinline crossorigin>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Memasang Subtitle

Kamu juga bisa memasang subtitle video, karena plyr mendukung subtitle WebVTT, caranya cukup mudah yaitu hanya dengan menambahkan element HTML5 <track>. Dan contoh kodenya akan seperti berikut

<video class='js-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="id" src="captions_id.vtt" default>
</video>

Jika subtitle dan video dihosting di server yang berbeda, perlu untuk menentukan atribut crossorigin atau subtitle tidak akan muncul.

Kualitas Video

Untuk menentukan opsi kualitas, kamu perlu menambahkan elemen HTML5 <source>, dengan atribut size=quality, dimana kualitas diganti dengan kualitas video, contoh:

<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <!-- Calidad -->
  <source src="video_576p.mp4" size="576" type="video/mp4">
  <source src="video_720p.mp4" size="720" type="video/mp4">
  <source src="video_1080p.mp4" size="1080" type="video/mp4">
</video>

Penutup

Nah itu tadi cara memasang pemutar audio dan video menggunakan Plyr untuk blog, jika kamu kebingungan untuk mengikuti tutorial ini, silakan tinggalkan komnetar untuk berdiskusi.

Atau agar kamu mengetahui lebih lanjut mengenai Plyr, saya sarankan untuk mengunjungi repositori Plyr di github.

Referensi Link:

InpuTekno

Search Suggest

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Langkah Memasang Pemutar Audio dan Video Plyr di Blogger

Memasang Pemutar Audio dan Video Plyr di Wordpress

Menyesuaikan Tampilan Plyr

Cara Penerapkannya Plyr di Blog

Embed Audio

Embed YouTube dengan Plyr

Embed Vimeo dengan Plyr

Embed Video Secara Langsung

Memasang Subtitle

Kualitas Video

Penutup

Password Laptop Jenny Summertime Saga Indonesia

Save File Game Summertime Saga V0.20.14 [New Update]

Save File Game Summertime Saga V0.20.16 [Update]

Cara Merubah Bahasa Summertime Saga Versi Indonesia

1000+ Preset Lightroom Gratis XMP untuk Android

Inputekno.Com