Cara Embed Audio & Video di Blog Dengan Plyr

CodePelajar - Suka Membagikan Video? atau Musik kepada pengunjung/Visitor di blog atau website Sobat? Jika ya, maka Tutorial ini patut di ikuti. Di Tutorial ini saya menggunakan Plugin Pihak Ketiga yaitu Plyr.io Sebagai Pemutar Media Berbasis HTML5 yang Modern mudah digunakan dan support semua browser.

Untuk dokumentasi lengkapNya silahkan baca2 di sini Documentation

Cara Memasang Audio & Video Ke dalam Postingan Blog


Script CSS

1. copy dan terapkan link-host CSS berikut sebelum </style> atau </b:skin>, dan bagi pengguna Wordpress Silahkan masukkan Link-Host ini kedalam style.css.

@import url("https://cdn.plyr.io/3.2.0/plyr.css");

2. Atau bisa juga Langsung letakkan saja sebelum Tag </head>, dan untuk pengguna wordpress silahkan masukkan link-host berikut kedalam Single.php.

 <link href="https://cdn.plyr.io/3.2.0/plyr.css" rel="stylesheet">

Script JS

1. Dan letakkan Link-host JS berikut sebelum tag </body> untuk wordpress sama saja letakkan di single.php

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

Embed Code Audio

Salah satu hal baru dari versi 3.4.3 Plyr, adalah sekarang memungkinkan Sobat untuk mengontrol kecepatan reproduksi di audio, untuk itu kode yang diperlukan adalah yang berikut :

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

Sobat juga dapat menentukan beberapa format; Biasanya mp3 adalah yang paling didukung. Dalam hal kualitas dan berat saya merekomendasikan ogg, Sehingga Sobat dapat menentukan keduanya agar browser dapat memilih yang terbaik :

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

Ogg adalah sebuah media format seperti mp3 hanya saja format tersebut free tidak seperti mp3 yang dillindungi oleh patent, oleh karenanya distro-distro besar tidak dapat memutar mp3 dikarenakan format tersebut memang dilindungi oleh patent sehingga distro-distro besar menghormati hal tersebut, nah ogg hadir sebagai pengganti mp3 dan dikatakan bahkan lebih baik dari mp3.

Embed Code Youtube

Plyr juga berfungsi sebagai pengganti kode/iframe untuk memasukkan video YouTube. Yang penting adalah mendapatkan id dari video, contoh ?V=ID Youtube, misalnya, kita akan mengambil kode dari tautan berikut :

https://www.youtube.com/watch?v=tKUC6vqC1kw
maka yang perlu di ambil hanya bagian setelah ?v= yaitu tKUC6vqC1kw

bagaimana sulitkah ? Oiya Untuk Wordpress Di sesuaikan sendiri ya..

Embed code video tautan langsung

Sobat juga dapat menggunakan tautan langsung dari file multimedia. Jika Sobat tidak memiliki tempat untuk menghostingnya, Sobat dapat menggunakan layanan gratis seperti Onedrive Google Drive dan Firebase . Kode yang diperlukan adalah sebagai berikut:

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

Embed Code Menggunakan Subtitle

<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="es" src="captions_es.vtt" default>
</video>

Bagaimana ? bagus bukan? buruan tunggu apalagi segera terapkan di blog/website kamu sekarang juga. Jika ada kesulitan di dalam tutorial ini tinggalkanlah komentar, InsyaAllah akan saya jawab secepat mungkin.

Jika Tutorial ini bermanfaat & bisa membantu Sobat, ada baiknya sobat Jangan lupa klik Share/Bagikan/Tweet/G-Plus Artikel pada tombol di bawah.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel