Justirva - Selamat Hari Jumat kawan, kali ini saya akan membagikan sebuah tutorial yang mungkin berguna bagi kamu yang ingin memiliki blog/website download mp3 dan streaming film.disini saya menggunakan Vimeo Sebagai pemutar media yang sederhana, dapat diakses dan dapat disesuaikan untuk Video, Audio, YouTube, oke langsung aja kita ke tutorial nya.
Cara Memasang Audio & Video Ke dalam Postingan Blog
- Login ke blog -> buka tema -> Edit-HTML -> Klik CTRL+F
- Copy dan Terapkan kode Js ini ke atas/sebelum tag </head> .
<link href="https://cdn.plyr.io/3.2.0/plyr.css" rel="stylesheet">
dan letakkan Js ini di atas/ sebelum tag </body<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.0 Plyr, adalah sekarang memungkinkan Kalian 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>Kalian juga dapat menentukan beberapa format; Biasanya mp3 adalah yang paling didukung. Dalam hal kualitas dan berat saya merekomendasikan ogg, Sehingga kalian dapat menentukan keduanya agar browser dapat memilih yang terbaik :
<audio class='js-player' controls> <source src="audio.mp3" type="audio/mp3"> <source src="audio.ogg" type="audio/ogg"> </audio>yang belum tau apa itu format ogg?
Ogg adalah format pemuat berkas video dan audio standar terbuka bebas yang dipelihara oleh Xiph.Org Foundation. Para pencipta format Ogg mengaku bahwa format ini tidak dibatasi oleh paten perangkat lunak dan dirancang untuk menyediakan streaming dan manipulasi yang efisien terhadap multimedia digital bermutu tinggi.
Maka hasilnya akan seperti ini :
Youtube :
Plyr juga berfungsi sebagai pengganti kode untuk memasukkan video YouTube. Yang penting adalah mendapatkan id dari video, yang setelahnya? V =, misalnya, kita akan mengambil kode dari tautan berikut :
https://www.youtube.com/watch?v=PZbkF-15ObM
Oleh karena itu id video adalah PZbkF-15ObM, sekarang kita hanya menspesifikasikannya dalam <div /> kosong menggunakan atribut data-video-id sebagai berikut :
Pengembang Plyr sedang mengerjakan alternatif untuk video tersemat, yang akan meningkat secara progresif, untuk mengetahui lebih banyak tentang itu, saya sarankan membaca dokumentasi.
Fakta menariknya adalah sejak versi 3.0, Kalian dapat memilih kualitas video dalam menu pilihan.
<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="PZbkF-15ObM"></div>Maka hasilnya akan seperti ini :
Pengembang Plyr sedang mengerjakan alternatif untuk video tersemat, yang akan meningkat secara progresif, untuk mengetahui lebih banyak tentang itu, saya sarankan membaca dokumentasi.
Fakta menariknya adalah sejak versi 3.0, Kalian dapat memilih kualitas video dalam menu pilihan.
Menggunakan Video Tautan Langsung
Kita juga dapat menggunakan tautan langsung dari file multimedia. Jika kalian tidak memiliki tempat untuk menghostingnya, Kalian dapat menggunakan Onedrive atau Google Drive . Kode yang diperlukan adalah sebagai berikut:
<video class='js-player' poster="thumbnail.jpg" controls playsinline> <source src="video.mp4" type="video/mp4"> </video>
Menggunakan Subtitle
Plyr kompatibel dengan subjudul WebVTT, untuk ini cara termudah adalah menggunakan elemen HTML5 <track />, misalnya :<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="Español" srclang="es" src="captions_es.vtt" default> </video>Maka Hasil nya akan seperti ini :
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.
Oiya saya lupa jika ada yang ingin di tanyakan langsung saja ke halaman FAQ
Search incoming terms
- Membuat audio musik di posting blog
- Cara Memasang Lagu di Blog Sesuai yang Kita Sukai
- Cara Memasang atau Memasukkan Lagu di Blog dengan Pilihan Sendiri
- cara memasang lagu atau musik di blog dan wordpress
- Cara Membuat Blog Video Streaming
- cara mudah membuat video streaming di web atau blog
- Membuat MultiTab Server Video Streaming Di Blog