Sebelum 2010, nonton video di web harus install plugin Flash dulu — ribet, gampang crash, jadi sumber malware, dan baterai laptop bisa cepet abis. Sampai akhirnya HTML5 dateng dengan tag <audio> dan <video> native. Browser udah bisa play media langsung dari satu tag, tanpa plugin apapun. Kontrol play/pause/volume otomatis dari browser, GRATIS. Itu salah satu keputusan teknis terbesar yang membentuk web modern.

🤔 Tahukah kamu? Steve Jobs nulis "Thoughts on Flash" tahun 2010 — surat publik nolak Flash di iPhone, mendukung HTML5. Itu titik balik yang ngebunuh Flash dan ngebangkitin HTML5 video. Sekarang Flash udah resmi mati (2020), HTML5 video jadi standar dunia.

Sintaks <audio>

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

Sintaks <video>

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Browser tidak mendukung video.
</video>

Atribut Audio & Video

• controls — menampilkan kontrol play/pause/volume
• autoplay — putar otomatis saat halaman dimuat
• loop — putar berulang
• muted — tanpa suara (sering digunakan bersama autoplay)
• poster — gambar thumbnail sebelum video diputar (khusus video)

Tag <source> memungkinkan kita menyediakan beberapa format file agar kompatibel di berbagai browser.

🎭 Analogi sehari-hari

<audio> dan <video> = TV/radio bawaan di halaman web. Native HTML5 — sebelumnya butuh Flash plugin (mati). Kontrol play/pause/volume gratis dari browser.

⚠️ Jebakan yang sering ditemui

• Autoplay diblokir browser modern — kecuali muted (autoplay muted). Spam autoplay = user benci, browser blokir.
• Format browser beda — Chrome/Firefox: webm + mp4. Safari: mp4 + mov. Sediakan multiple <source> untuk kompatibilitas.
• Lupa controls = user tidak punya cara play. Visible button atau JS handler wajib.
• Lupa width/height = layout shift saat metadata load. Set ukuran atau wrap dalam aspect-ratio container.
• Subtitle butuh <track> — kind="subtitles" + file .vtt. Penting untuk a11y + SEO.
• preload="none" untuk video besar — hemat bandwidth, baru load saat user play.
• CORS untuk asset cross-origin perlu crossorigin="anonymous" + server header.

TL;DR: <audio>/<video> = native HTML5 (gak butuh Flash, mati 2020). Atribut: controls (play/pause/volume — wajib biar user bisa play), autoplay muted (autoplay tanpa muted DIBLOKIR browser), loop, poster (thumbnail video). Multi <source> untuk format chain (mp4 + webm). Wajib <track kind="subtitles"> .vtt untuk a11y + SEO. preload="none" untuk video besar (hemat bandwidth). Set width/height biar gak layout shift.