Home
Blogger
Programmer

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

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 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 sebuah 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.

Tutorial Memasang Pemutar Audio dan Video Plyr di Blogger

Langkah pertama yaitu mesuk ke akun Blogger kamu > Tema > Edit HTML, selanjutnya cari kode penutup </head> dan tempel kode dibawah tepat diatas tersebut. 


// Kode CSS Plyr
<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.6.2/plyr.css");
//]]>
</script>

Kode css Plyr

Selanjutnya yaitu memasang plyr.js, cari kode penutup </body> di template blog kamu, lalu Copy dan tempelkan kode dibawah tepat diatas kode tersebut. 


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

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


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

Terakhir Copy kode berikut tepat dibawah kode js sebelumnya, 


<script>//<![CDATA[
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
//]]></script>

Maka hasil akhirnya akan nampak seperti ini 


Kode Javascript Plyr
<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<script>//<![CDATA[
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
//]]></script>

Kode Javascript Plyr

Jika tahap diatas sudah selesai, maka selanjutnya yaitu cara menerapakan di blog, 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 formar tersebut dan 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">
</audio>

Berikut adalah contoh pemutar dengan file audio yang telah saya unggah ke Google Drive, untuk cara kamu bisa melihat artikel saya 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, 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 kode 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 menggunakan atribut iframe 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. Jika kamu tidak memiliki tempat untuk menghosting file media, kamu bisa menggunakan Google drive. Dan kode untuk menerapkan pemitaran video/atau audionya seperti berikut 


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

Kamu juga bisa 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>
  <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' 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, di mana 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.


Article "Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr" protected

Post a Comment