Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr - LAKUNTUM

Membuat Pemutar Audio dan Video HTML5

Membuat pemutar audio dan video HTML5 sangat mudah dengan Plyr - pemutar media sederhana yang mendukung HTML5, YouTube, dan Vimeo. Ini ringan, mudah beradaptasi, dan kompatibel dengan browser modern, menjadikannya pilihan ideal untuk pengembang situs web. Pemutaran audio dan video HTML5 menawarkan kinerja dan pengalaman pengguna yang unggul di desktop dan perangkat seluler. Jika Anda terbiasa dengan kode videojs, Anda akan menemukan bahwa Plyr memiliki fungsi yang serupa, tetapi juga menawarkan fitur tampilan yang menarik bagi pengguna. Plus, ini kompatibel dengan browser lama.

Jika Anda ingin memiliki pemutaran audio atau video online yang andal, Plyr bisa menjadi solusi yang bagus. Namun, Anda mungkin bertanya-tanya bagaimana cara menggunakan Plyr di blog Anda. Pada postingan kali ini saya akan memberikan tutorial cara membuat media player untuk audio atau video di blog menggunakan kode Plyr.

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr

Jika Anda ingin memiliki pemutaran audio atau video online yang andal, Plyr bisa menjadi solusi yang bagus. Namun, Anda mungkin bertanya-tanya bagaimana cara menggunakan Plyr di blog Anda. Pada postingan kali ini saya akan memberikan tutorial cara membuat media player untuk audio atau video di blog menggunakan kode Plyr.

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
4. 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");//]]><

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

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

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

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

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

---

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

Di Plyr versi 3.0, fitur baru adalah kemampuan untuk mengontrol kecepatan pemutaran audio. Untuk melakukannya, gunakan kode berikut:

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

Anda memiliki opsi untuk menentukan format yang berbeda, dengan mp3 yang paling banyak didukung. Namun, jika Anda ingin menjaga kualitas, format ogg juga dapat dipertimbangkan.

Dengan mendukung berbagai format seperti mp3, ogg, dan vaw, browser Anda dapat dengan cerdas memilih format optimal untuk pemutaran, memungkinkan pengalaman audio yang mulus dan berkualitas tinggi.

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

Perkenankan saya untuk menyajikan kepada Anda demonstrasi pemutar yang sangat bagus, disertai dengan file audio yang harmonis yang telah saya unggah dengan anggun ke Google Drive. Karya seni ini pasti akan memikat Anda dan membuat Anda kagum. Untuk mengakses tautan langsung ke mahakarya ini, silakan merujuk ke artikel yang disediakan.linknya

Audio Sample

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>

Dengan Plyr, kini Anda memiliki kemampuan untuk mengelola pemutaran YouTube di blog Anda. Dengan menerapkan kode yang disediakan, Anda dapat mencapai halaman demo yang memukau secara visual yang menampilkan kemampuan luar biasa dari alat ini.

 

Embed Video Secara Langsung

Perlu dicatat bahwa Plyr memiliki kemampuan untuk memutar video secara elegan yang ditautkan dengan mulus ke koleksi file multimedia kami.

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

Implementasi pemutaran video atau audio tertanam melalui tautan langsung dapat dicapai melalui kode berikut.

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

Dimungkinkan juga untuk mempersonalisasi pengalaman dengan memasukkan format video tambahan, seperti webm untuk kualitas video yang superior. Kode yang diperlukan untuk kustomisasi ini adalah sebagai 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">
</video>

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

Pelajari cara memasang pemutar audio dan video dengan elegan di blog Anda menggunakan Plyr. Jika Anda merasa kesulitan untuk mengikuti tutorial, jangan ragu untuk memberikan komentar dan terlibat dalam diskusi. Izinkan kami memandu Anda untuk menciptakan pengalaman multimedia yang mulus dan canggih untuk audiens Anda.

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

Related Posts