Siti merekam tutorial rendangnya, lalu mengekspor dua berkas: WebM yang efisien dan MP4 yang serba bisa diputar. Masalahnya, kita tidak tahu browser mana yang dipakai pengunjung — sebagian membaca WebM, sebagian yang lama hanya mengerti MP4. Menyematkan satu berkas berarti menebak-nebak. Solusinya satu elemen, banyak kandidat: source.

Chapter ini membahas cara kerja daftar kandidat, peran atribut type dalam menghemat unduhan, urutan penulisan yang menentukan pilihan browser, dan bedanya dengan srcset pada gambar.

Aturan Dasar source #

Elemen source diletakkan di dalam audio atau video, menggantikan atribut src pada elemen induknya. Satu source berarti satu kandidat berkas — boleh dua, tiga, atau lebih. source adalah void element, jadi tidak punya tag penutup dan tidak punya isi.

Mekanismenya berupa pemeriksaan berurutan: browser membaca kandidat dari baris paling atas, memeriksa apakah formatnya didukung, lalu memutar kandidat pertama yang lolos. Kandidat setelahnya diabaikan sama sekali. Bila tidak ada satu pun yang didukung, barulah teks fallback di dalam elemen induk ditampilkan.

Atribut type mempercepat proses ini. Nilainya berupa MIME type berkas, misalnya video/webm atau video/mp4. Browser cukup membaca nilai type lalu membandingkannya dengan daftar format yang dimilikinya — keputusan diambil tanpa mengunduh satu byte pun dari berkas. Tanpa type, browser harus mengunduh sebagian data berkas untuk menebak formatnya; usaha itu percuma bila ternyata formatnya tidak didukung.

Contoh video dua format beserta sampulnya:

html 
<video controls width="640" height="360" poster="video/sampul-rendang.jpg">
  <source src="video/tutorial-rendang.webm" type="video/webm">
  <source src="video/tutorial-rendang.mp4" type="video/mp4">
  Browser ini tidak mendukung pemutar video HTML.
</video>

Hasil Render:

Pada demo, kedua berkas lokal diganti satu video contoh daring (CC0, dari MDN) dalam dua format — WebM dan MP4 — agar urutan fallback bisa dibuktikan langsung; poster diganti placeholder SVG. Demo membutuhkan koneksi internet.

Mari kita telaah kode di atas:

  1. Baris 1 (<video ...>): pemutar tanpa atribut src — sumbernya digantikan anak source.
  2. Baris 2 (<source ... type="video/webm">): kandidat pertama; browser yang mendukung WebM berhenti di sini dan memutar berkas ini.
  3. Baris 3 (<source ... type="video/mp4">): kandidat cadangan; terpakai hanya bila WebM ditolak.
  4. Baris 4 (teks fallback): tampil hanya bila kedua kandidat ditolak — browser menganggap seluruh elemen tidak dapat diputar.

Bedanya dengan srcset pada img #

Gambar dan media menyelesaikan masalah serupa dengan alat berbeda. Pada img, kita memakai atribut srcset dan sizes agar browser memilih berkas sesuai ukuran layar dan kerapatan piksel — kandidatnya berupa versi resolusi dari gambar yang sama. Pada audio dan video, kandidat dibedakan oleh formatnya, sehingga daftarnya ditulis sebagai anak source, bukan atribut. Keduanya bertemu di elemen picture, yang memakai source untuk gambar dengan kondisi media — dibahas di Section Images.

Ringkasan #

  • source diletakkan di dalam audio/video sebagai daftar kandidat; browser memutar kandidat pertama yang didukung.
  • Atribut type berisi MIME type sehingga browser memutuskan tanpa mengunduh berkas.
  • Urutan kandidat menentukan pilihan — format utama di atas, format cadangan di bawah.
  • Gambar memakai srcset pada img; media memakai anak source.

Kandidat sudah tersedia — sekarang kita atur perilaku pemutarnya. Chapter berikutnya membahas controls, autoplay, muted, loop, preload, dan playsinline.