Lewati ke konten utama

Audio & Video

HTML5 merevolusi web dengan memungkinkan kita memutar musik dan video langsung di browser tanpa plugin tambahan (seperti Flash Player zaman dulu).

Audio (Suara)​

Gunakan tag <audio>. Anda wajib menambahkan atribut controls agar tombol play/pause muncul.

Contoh custom HTML5 audio player

Sumber: codeconvey.com -

<audio controls>
    <source src="musik.mp3" type="audio/mpeg">
    Browser Anda tidak mendukung elemen audio.
</audio>
  • Format yang didukung: MP3 (paling aman), WAV, OGG.

Video (Native HTML5)​

Gunakan tag <video>. Sama seperti audio, atribut controls wajib ada.

Contoh HTML5 native video player

Sumber: designsystem.com -

<video width="320" height="240" controls poster="sampul-video.jpg">
    <source src="video-promosi.mp4" type="video/mp4">
    Browser Anda tidak mendukung elemen video.
</video>

Atribut Tambahan​

  • poster: Menampilkan gambar sampul (thumbnail) sebelum video diputar.
  • loop: Video akan berulang otomatis setelah selesai.
  • muted: Video dimulai dalam keadaan bisu.
  • autoplay: Video memutar otomatis (Sebagian besar browser modern memblokir autoplay yang bersuara demi kenyamanan pengguna).

Embed Video (YouTube) - Best Practice​

Hosting file video sendiri (.mp4) memakan banyak bandwidth dan ruang server. Cara paling efisien dan gratis adalah mengupload video ke YouTube, lalu menanamnya (embed) di web Anda.

Contoh embed video YouTube responsive

Sumber: araweb.com -

Caranya:

  1. Buka video YouTube.
  2. Klik tombol Share -> Embed.
  3. Copy kode <iframe> yang diberikan.

Contoh kode:

<iframe 
    width="560" 
    height="315" 
    src="[https://www.youtube.com/embed/VIDEO_ID](https://www.youtube.com/embed/VIDEO_ID)" 
    title="YouTube video player" 
    frameborder="0" 
    allowfullscreen>
</iframe>
Pro Tip

Selalu gunakan metode Embed (Iframe) untuk video durasi panjang agar website Anda tetap ringan dan cepat diakses. Biarkan server YouTube yang menanggung beban loading videonya.