adydetra_
28 Jul 2025

Media di HTML

Sekarang kita lanjut ke bagian berikutnya, yaitu cara menampilkan media seperti audio dan video di HTML. Saat ini, konten multimedia adalah sesuatu yang nggak bisa lepas dari halaman web modern, apalagi buat situs-situs yang fokus pada konten edukasi, hiburan, atau berita.

Berikut adalah cara-cara simpel yang bisa kamu gunakan.

Menampilkan Audio di HTML

Untuk menampilkan file audio di HTML, gunakan elemen <audio> seperti ini:

<audio controls>
  <source src="lagu.mp3" type="audio/mpeg">
  Browser kamu tidak mendukung audio HTML5.
</audio>

Penjelasan:

  • controls: menampilkan tombol play, pause, volume, dll.
  • <source>: menentukan file audio yang mau dimainkan.
  • Teks di dalam elemen <audio> muncul jika browser nggak support elemen audio.

Format Audio yang Didukung

Biasanya ada tiga format audio yang paling umum dipakai di web:

  • MP3 (.mp3) – paling populer.
  • OGG (.ogg) – open-source dan gratis.
  • WAV (.wav) – kualitas tinggi, ukuran besar, kurang disarankan untuk web.

Contoh lengkap dengan beberapa format alternatif (jika browser tidak mendukung salah satu format):

<audio controls>
  <source src="lagu.ogg" type="audio/ogg">
  <source src="lagu.mp3" type="audio/mpeg">
  Browser kamu tidak mendukung audio HTML5.
</audio>

Menampilkan Video di HTML

Elemen <video> untuk menampilkan video di halaman web sangat mudah digunakan:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Browser kamu tidak mendukung video HTML5.
</video>

Penjelasan:

  • width dan height: mengatur ukuran video.
  • controls: menampilkan kontrol seperti play, pause, fullscreen, dll.

Format Video yang Didukung

Ada beberapa format video yang populer dan didukung browser modern:

  • MP4 (.mp4) – paling populer dan kompatibel luas.
  • WebM (.webm) – format open-source, disarankan untuk browser modern.
  • OGG (.ogv) – alternatif open-source lainnya.

Contoh video dengan beberapa format alternatif:

<video width="320" height="240" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Browser kamu tidak mendukung video HTML5.
</video>

Menampilkan Video YouTube di HTML

Sering kali kamu mau menampilkan video dari YouTube langsung di halaman webmu. Caranya simpel, pakai embed iframe dari YouTube:

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/ID_VIDEO" 
  frameborder="0" allowfullscreen>
</iframe>

Ganti ID_VIDEO dengan ID video YouTube yang ingin kamu tampilkan.

Menampilkan Video dengan Autoplay dan Loop

Kalau mau video otomatis dimainkan dan diulang terus menerus:

<video width="320" height="240" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>
  • autoplay: video otomatis dimainkan.
  • loop: video otomatis diputar ulang terus menerus.
  • muted: audio video dimatikan (biasanya wajib kalau pakai autoplay di beberapa browser).

Kesimpulan

Konten multimedia seperti audio dan video itu cara yang bagus banget buat bikin halaman web kamu lebih menarik. Tapi ingat, selalu perhatikan ukuran file-nya agar halaman kamu nggak jadi lambat waktu loading. Dan jangan lupa, kalau menampilkan video dengan autoplay, pastikan nggak mengganggu pengalaman pengguna yang mengunjungi situsmu.