Audio dan Video di Halaman Web

Video dengan Tag video

Menampilkan video semudah menampilkan gambar:

<video src="liburan.mp4" controls width="640"></video>

Atribut controls menampilkan tombol play, volume, dan fullscreen bawaan browser. Tanpa controls, video tidak bisa dimainkan pengunjung (kecuali kamu kendalikan pakai JavaScript).

Atribut Video yang Berguna

<video width="640" controls poster="thumbnail.jpg" preload="metadata">
  <source src="liburan.mp4" type="video/mp4">
  <source src="liburan.webm" type="video/webm">
  Maaf, browser kamu tidak mendukung video HTML5.
</video>

• poster: gambar sampul sebelum video diputar.
• preload="metadata": cuma unduh info durasi dulu, hemat kuota (opsi lain: none, auto).
• <source>: daftar file cadangan. Browser pakai yang pertama didukungnya.
• Teks di dalam tag: tampil kalau browser tidak mendukung video sama sekali.

Kenapa dua format? Tidak semua browser mendukung codec yang sama. MP4 (H.264) didukung hampir semua, WebM didukung Chrome dan Firefox. Menyediakan keduanya berarti video jalan di mana-mana.

Atribut Tambahan

• autoplay: putar otomatis saat halaman dibuka.
• muted: tanpa suara.
• loop: putar berulang.

<video src="bg.mp4" autoplay muted loop></video>

Catatan teknis: Browser modern memblokir autoplay bersuara. Video autoplay harus muted, kalau tidak browser diam-diam tidak memutarnya. Ini kebijakan untuk mencegah halaman tiba-tiba berisik. Jadi pola video background selalu autoplay muted loop.

Audio dengan Tag audio

Prinsipnya sama persis dengan video, cuma tanpa tampilan visual:

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

Format MP3 didukung universal, OGG sebagai cadangan untuk browser open-source.

Caption untuk Video (Subtitle)

Video yang profesional punya subtitle. HTML mendukungnya lewat tag <track> dengan file WebVTT:

<video src="presentasi.mp4" controls>
  <track src="subtitle-id.vtt" kind="subtitles" srclang="id" label="Indonesia" default>
</video>

File .vtt berisi teks ber-waktu. Ini bukan cuma soal kenyamanan: subtitle membantu penonton tunarungu dan penonton yang menonton tanpa suara (mayoritas penonton HP).

Kapan Tidak Pakai Tag Ini

Kalau videonya dari YouTube atau TikTok, jangan unduh lalu pasang pakai <video>. Pakai embed resmi mereka lewat <iframe> (dibahas modul berikutnya). Alasannya: bandwidth video itu mahal, dan platform video sudah mengoptimasi streaming-nya.

Contoh Lengkap

<h2>Galeri Media</h2>

<video width="480" controls poster="cover.jpg" preload="metadata">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  Browser kamu tidak mendukung video.
</video>

<h3>Podcast Episode 1</h3>
<audio controls>
  <source src="ep1.mp3" type="audio/mpeg">
  Browser kamu tidak mendukung audio.
</audio>

Selalu sediakan controls, selalu sediakan teks fallback. Itu dua kebiasaan yang memisahkan pemula dari yang rapi.