Styling Audio/Video Player

Cara Menyematkan Audio dari Google Drive kepostingan Web Blog

1. Langkah pertama Buka Google Drive dan temukan file audio yang ingin Anda bagikan.
2. Klik titik tiga Ξ dipojok kanan atas lalu, pilih "Copy Link" untuk menyalin tautan
3. Salin ID file dari tautan yang telah Anda salin sebelumnya. ID file biasanya terletak setelah "/d/" dan sebelum "/view".
4. Contoh:
   https://drive.google.com/file/d/146zp9ye3Yt-y0Me0rAIXgqHqpIpGvSCm/view?usp=drivesdk
5. Ini adalah kode unik "Your file ID" 146zp9ye3Yt-y0Me0rAIXgqHqpIpGvSCm
6. Lalu, buat Tag "<audio>" di halaman HTML VIEW situs web atau blog Anda.
7. Sisipkan tag "<audio>"atau copy elemen Audio berikut ini:

    
   <audio controls="">
     <source src="https://drive.google.com/uc?id=YOUR_FILE_ID_HERE">
   </audio>

8. Gantilah `YOUR_FILE_ID_HERE` dengan ID unik file "<audio>" yang sudah Anda salin sebelumnya.
9. Simpan perubahan Anda dan buka situs web atau blog Anda di browser untuk melihat perubahannya
10. Nah! Ini dia penampakan akhirnya

Tips for Cover!
Jika kamu menggunakan Styling Extended Lakukan tahapan langkah² yang sama untuk mengganti gambar covernya.

Catatan Penting!

Pastikan file "<audio>" memiliki hak akses yang benar untuk dibagikan secara publik.

Pastikan "<audio>" dapat diputar dengan benar menggunakan pemutar audio bawaan.

Uji coba di beberapa browser untuk memastikan kompatibilitas.

Styling Media Player Extended

Untuk tampilan Player yang lebih cantik dan fituristik seperti yang saya gunakan pada page ini, kamu bisa menyalin Code atau double klik pada kode dibawah ini dan lakukan perubahan pada block teks warna kuning sesuai kebutuhan kamu, berikut ini saya sertakan sample Codenya

Extended Player Code

 
  <div id="musicPlayer"></div>
  <script>
    var playerTracks = [
     {
      name: "Judul Music ?",
      artist: "Penyanyi ?",
      cover: "https:link Cover",
      source: "https:link Music"
    }
];
  </script>
  

Cara Menyematkan Video dari Youtube kepostingan Web Blog

1. Langkah pertama Buka aplikasi youtube cari video yang ingin anda sematkan.
2. Klik tombol Bagikan yang terletak dibawah video youtube.com pilih "Salin Link" untuk menyalin tautan
3. Salin Data Embed dari tautan yang telah Anda salin sebelumnya.
4. pisahlan data embed dari salinan link, biasanya terletak setelah ".be/... dan sebelum tanda ...?"
5. Contoh:
   https://youtu.be/J-PW55bizgo?si=m6MaqKeQZJx3PCuU
6. Ini adalah your "data-embed" J-PW55bizgo
7. Lalu, buat Tag "<video>" di halaman HTML VIEW situs web atau blog Anda.
8. Sisipkan tag "<video>"atau copy elemen Audio berikut ini:

     <div class="lazyYt" data-embed="YOUR_DATA_EM_HERE">
       <div class="play">
         <svg viewBox="0 0 213.7 213.7">
           <polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon>
           <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle>
         </svg>
       </div>
     </div>

9. Gantilah `YOUR_DATA_EM_HERE` dengan data embed "<video>" yang sudah Anda salin sebelumnya.
10. Simpan perubahan Anda dan buka situs web atau blog Anda di browser untuk melihat perubahannya
11. Nah! Ini dia penampakan akhirnya

Penggunaan Code

  <div class="lazyYt" data-embed="?????">
    <div class="play">
      <svg viewBox="0 0 213.7 213.7">
        <polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon>
        <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle>
      </svg>
    </div>
  </div>

Informasi!
Jika kamu mennonton video ini diweb blog ini, maka kami akan membebaskan kamu dari berbagai macam tontonan iklan youtube

---

Baca Juga