-->
MqZ6MWB9MGBcNqBdMGBaNaJ6M8IeyCoFADMlNWZ=
6074645612605633477
Cara Menggunakan Plyr.js untuk Menampilkan Video di Blogger

Cara Menggunakan Plyr.js untuk Menampilkan Video di Blogger

Cara Menggunakan Plyr.js untuk Menampilkan Video di Blogger

Cara menggunakan plyr.js player untuk menampilkan video di blog Pada artikel ini kita akan berbicara tentang bagaimana Anda dapat menggunakan plyr.js player di posting blog.
Pertanyaan pertama muncul di benak kita, mengapa kita perlu menggunakan plyr.js player di blog kita? Jawabannya sangat sederhana, ketika kita langsung menyematkan video apapun di blogger tidak responsif dan itu membuat blog kita terlihat jelek. Ada banyak keuntungan dari pemain plyr.js, Anda dapat membacanya dari link resmi GitHub dan mengetahui lebih banyak info seputar plyr.js. Sekarang mari kita bicara tentang bagaimana Anda dapat mengaturnya di tema blog Anda.

Plyr adalah pemutar media HTML5, YouTube dan Video yang sederhana, ringan, dapat diakses, dan dapat disesuaikan yang mendukung browser modern. plyr.js dapat digunakan untuk menampilkan Audio HTML5, Video HTML5, iframe (Responsif), Video YouTube, dan Vimeo.

Bagaimana cara meng-install:

Pertama, instal kode CSS eksternal terlebih dahulu. Pasang kode tepat di atas kode </head>

<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.4.7/plyr.css");
//]]>
</script>

Kedua, instal kode Javascript eksternal, instal kode tersebut langsung di atas kode </body>

<script type='text/javascript' src='https://cdn.plyr.io/3.4.7/plyr.js'></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>

Kode Pemanggil:

1. Pemanggil Kode Video HTML5 (Link Video Langsung):

<video class="js-plyr" controls playsinline poster="#" src="#">
<source src="#" type="video/mp4" size="480">
<source src="#?720" type="video/mp4" size="720">
<source src="#?1080" type="video/mp4" size="1080">

<!-- Captions are optional -->
<track kind="captions" label="Français" srclang="fr" src="#">
<track kind="captions" label="English" srclang="en" src="#" default>
<track kind="captions" label="Español" srclang="es" src="#">
</video>

Di sini Anda harus mengedit beberapa nilai sesuai kebutuhan Anda:

1. [poster = "..."] = Ubah konten dengan tautan gambar thumbnail yang ingin Anda gunakan.

Contoh:
poster="https://1.bp.blogspot.com/-oNCSpFmIqMc/X-LKfF6K3nI/AAAAAAAAAPM/xvTDCd2ZClgbcUGoWZFQC1_uUnRkbFcQwCLcBGAsYHQ/s0/Cara%2BMembuat%2BTombol%2BWidget%2BChat%2BWhatsapp%2Bdi%2BBlogger.png"

2. [src = "..."] = Ganti konten dengan tautan video Anda./p>

Contoh:
src="https://cdn.plyr.io/static/blank.mp4"

3. [type = "video / mp4"] = Ubah dengan ekstensi video Anda.

Contoh:
type = "video / mp4"
type = "video / mkv"
type = "video / webm"

4. [size = "..."] = Ubah dimensi video Anda.

Contoh:
size = "480"
size = "720"
size = "1080"

5. [label = "..."] = Ubah nama bahasa teks / teks.

Contoh:
label = "Français"
label = "Inggris"
label = "Indonesia"

6. [srclang = "..."] = Gantikan dengan singkatan negara pada subtitle / bahasa teks.

Contoh:
srclang = "fr"
srclang = "en"
srclang = "id"

2. Calling HTML5 Audio (Direct Audio Links):

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

Bagian yang Dapat Diedit:

1. [src = "..."] = Ganti konten dengan tautan video Anda.

Contoh:
src="https://cdn.plyr.io/static/audio.mp3"

3. Memanggil Video YouTube:

<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="Z8trbwjikNg"></div>
Catatan, ganti konten data-plyr-embed-id = "..." dengan id video Youtube Anda.
Example:
https://www.youtube.com/watch?v=Z8trbwjikNg
Bagian Z8trbwjikNg adalah id yang Anda butuhkan.

4. Memanggil Video Vimeo:

<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="450996608"></div>
Catatan :
ganti konten data-plyr-embed-id = "..." dengan id video Vimeo Anda.
Example:
https://vimeo.com/450996608
Bagian 450996608 adalah id yang Anda butuhkan.

5. Panggilan Video dengan Youtube iFrame:

Pertama, cari video yang akan digunakan di YouTube, lalu tekan tombol Bagikan. Tekan tombol Embed, lalu salin semua kode yang ada. Setelah itu beri bungkus seperti ini:

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

Kode <div class="plyr__video-embed" id="player"> adalah pembungkusnya, di dalamnya ada kode iFrame untuk menampilkan video.

Anda bisa mendapatkan informasi lebih lanjut tentang kustomisasi CSS, Metode & Pengaturan JSON dan Ekstra. Terimakasih! Semoga harimu menyenangkan.

1 comment

  1. Spaceroom
    Saran , mungkin bisa tambahkan demo atau hasilnya terlebih dahulu di awal. sebelumnya terimakasih telah sharing gan
Tinggalkan komentar sesuai topik artikel. Komentar di luar topik tidak disarankan (terutama disertai link aktif).
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code code

© ‧ Tomy Tech ~ All rights reserved.