Cara Memasang Plyr.js Untuk Menampilkan Video Dan Audio Di Blogger

Plyr Adalah Penampil Video, Audio, YouTube, dan Vimeo yang dapat dipasang di Website, dan Blog.

Cara Memasang Plyr.js Untuk Menampilkan Video Dan Audio Di Blogger

1. Masuk ke Dashboard Blogger.

2. Pada Dashboard Blogger, Klik Tema.

3. Kemudian Klik Dan klik Edit HTML.

4. Cari Bagian </head> dan Tempel CSS Stylesheet Berikut tepat Diatasnya.

<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://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css");
//]]>
</script>

5. Dan Tempel Kode Berikut di Atas </body>.

<script src='https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.js' integrity='sha384-57T4mPqHdwe1fnUityXThpfVPj8/afmX96ZhQyvYdlO7Od34vileslvxmCJyYEMH' crossorigin='anonymous' type='text/javascript'></script>
<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>

Anda juga Dapat memilih Versi Polyfill Untuk Browser yang tidak mendukung ES6

<script src='https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.polyfilled.js' integrity='sha384-w15trtrHyfeMIwdffWq8VXE75kgn3nmMb7hx/w3v1MNjdbWONKiJaw14bcxGcZhU' crossorigin='anonymous' type='text/javascript'></script>
<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>

Menerapkannya Di Blogger

Setelah Memasang Plyr.js Di Blogger, Berikut adalah cara Menerapkannya.

Postingan Terkait

Embed Audio

Gunakan Kode Berikut.

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

Jika Ingin menggunakan Format mp3 dan ogg.

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

Keterangan	Bawaan	Ganti menjadi
<source/>	audio.mp3	Tautan File Audio Kamu
<source/>	audio/ogg	Tautan File Audio Kamu

Berikut Adalah Contohnya.

 

Embed Video Langsung

Gunakan Kode Berikut.

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

Jika ingin menambahkan Video dengan Format yang Lain, Seperti webm Untuk Video yang Berkualitas Tinggi.

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

Keterangan	Bawaan	Ganti menjadi
poster	thumbnail.jpg	Tautan File Gambar Yang ingin Kamu jadikan Thumbnail
<source/>	video.mp4	Tautan File Video Kamu
<source/>	video.webm	Tautan File Video Kamu

Memasang Subtitle

Anda juga dapat Menambah Subtitle Pada Video, Karena mendukung Subtitle WebVTT, Caranya cukup mudah Yaitu menambahkan Elemen <track>. Berikut adalah Kodenya.

<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 Dihosting di Tempat Lain, Anda Perlu Menambahkan Atribut crossorigin.

 

Keterangan	Bawaan	Ganti menjadi
poster	thumbnail.jpg	Tautan File Gambar Yang ingin Kamu jadikan Thumbnail
<source/>	video.mp4	Tautan File Video Kamu
<source/>	video.webm	Tautan File Video Kamu
<track/>	captions_en.vtt	Tautan Subtitle Kamu
<track/>	captions_id.vtt	Tautan Subtitle Kamu

Kualitas Video

Untuk Menambahkan Kualitas Video, Kamu perlu menambahkan Atribut <source/>, Dan size=quality untuk Beberapa Kualitas. Berikut adalah Kodenya.

<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <!-- Quality -->
  <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>

Keterangan	Bawaan	Ganti menjadi
poster	thumbnail.jpg	Tautan File Gambar Yang ingin Kamu jadikan Thumbnail
<source/>	video_576p.mp4	Tautan File Video Anda dengan Resolusi 576p
<source/>	video_720p.mp4	Tautan File Video Anda dengan Resolusi 720p
<source/>	video_1080p.mp4	Tautan File Video Anda dengan Resolusi 1080p

Berikut Adalah Contoh Video Dengan dukungan Kualitas Video dan Subtitle.

 

Memasang Video YouTube

Anda Juga dapat menambahkan Video Yang berasal dari YouTube dengan Cara menggunakan ID Video YouTube, Anda bisa mendapatkannya pada URL Setelah ?v=, Berikut adalah Contohnya.

https://www.youtube.com/watch?v=7X8II6J-6mU

Dan Berikut Adalah Kodenya.

<div class="js-player" data-plyr-embed-id="7X8II6J-6mU" data-plyr-provider="youtube"></div>

Jika ingin Menggunakan Kode iframe

<div class="plyr__video-embed" id="player">
  <iframe src="https://www.youtube.com/embed/7X8II6J-6mU?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>

Berikut Adalah Contohnya.

Memasang Video Vimeo

Anda Juga dapat menambahkan Video Yang berasal dari Vimeo dengan Cara menggunakan ID Video Vimeo. Berikut Adalah Contohnya

https://vimeo.com/247535042

Dan Berikut Adalah Kodenya.

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

Jika Ingin Menggunakan Kode iframe

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

Berikut Adalah Contohnya.

Sumber File:
https://github.com/sampotts/plyr Dan https://www.inputekno.com/2020/09/cara-membuat-pemutar-audio-video-html5-dengan-plyr.html

Audio, Video Langsung dan Video YouTube:
https://www.youtube.com/watch?v=7X8II6J-6mU

Video Vimeo:
https://vimeo.com/247535042

Buka untuk Melanjutkan

Pergi ke Tautan

Berlangganan Newsletter

Dapatkan Pemberitahuan dan Info Postingan terbaru dari Kami, Langsung di Kotak surat Anda.

Masukkan Email Anda

Dengan Berlangganan Newsletter, Anda setuju dengan Kebijakan Privasi dan Persyaratan Layanan yang Berlaku. Anda dapat Berhenti Berlangganan kapan saja.