Belajar HTML - Elemen Media Tambahan
Episode ini membedah media kaya: audio dan video dengan kontrol bawaan, elemen source untuk fallback format, serta picture untuk gambar responsif berdasarkan kondisi perangkat.
#Pendahuluan
Halaman modern tidak hanya berisi teks dan gambar diam. Episode 11 membahas elemen media tambahan: audio untuk suara, video untuk gambar bergerak, picture untuk gambar yang menyesuaikan kondisi perangkat, dan source untuk menyediakan beberapa format sekaligus.
Satu konsep penting yang akan muncul di seluruh episode ini: fallback. Browser yang tidak mendukung satu format akan mencoba format berikutnya. Struktur yang benar memastikan media tetap berfungsi di sebanyak mungkin perangkat.
#Audio
#Elemen audio dan Kontrol
audio memutar suara dengan kontrol bawaan yang disediakan browser:
<audio controls preload="metadata" src="media/sambutan.mp3">
Browser kalian tidak mendukung pemutar audio.
</audio>Atribut yang sering dipakai:
controls: menampilkan tombol putar, volume, dan progres.preload: mengatur strategi pemuatan, nilaimetadatahanya memuat informasi singkat.loopdanmuted: atribut boolean untuk mengulang dan membungkam.
Teks di antara tag pembuka dan penutup adalah fallback — tampil jika elemen audio tidak didukung. Aturan ini berlaku untuk semua elemen media.
#Menyediakan Beberapa Format
Kodek audio berbeda dukungannya antar browser. Gunakan source untuk menyediakan alternatif:
<audio controls>
<source src="media/sambutan.mp3" type="audio/mpeg">
<source src="media/sambutan.ogg" type="audio/ogg">
Browser kalian tidak mendukung pemutar audio.
</audio>Browser memilih source pertama yang formatnya didukung. Urutkan dari format paling efisien.
#Video
#Elemen video dan Atributnya
video memutar gambar bergerak, biasanya dengan controls dan atribut tambahan:
<video controls width="640" preload="metadata" poster="media/poster.jpg">
<source src="media/intro.mp4" type="video/mp4">
<source src="media/intro.webm" type="video/webm">
Browser kalian tidak mendukung pemutar video.
</video>poster: gambar yang tampil sebelum video diputar.widthdanheight: dimensi pemutar, mencegah layout melompat.muteddanloop: atribut boolean.
Jangan memakai autoplay dengan suara — browser memblokirnya dan pengalaman buruk bagi pengguna. autoplay hanya wajar bersama muted.
#Memeriksa File Media
Sebelum menyisipkan media, periksa format file lewat terminal:
ffprobe media/intro.mp4Perintah ffprobe media/intro.mp4 menampilkan codec, resolusi, dan durasi. Pastikan dimensi cocok dengan nilai width dan height yang kalian tulis.
#Elemen source
#Peran source dalam Media
source adalah elemen kosong yang dipakai di dalam audio, video, dan picture. Pada audio dan video, atribut src dan type menentukan format; browser memilih yang pertama didukung.
Atribut type penting: berisi MIME type seperti video/mp4 atau audio/ogg, sehingga browser bisa menyaring format tanpa mengunduhnya lebih dulu.
#Elemen picture
#Gambar Responsif Berdasarkan Kondisi
picture memberi browser beberapa sumber gambar dan memilih berdasarkan media query atau dukungan format:
<picture>
<source srcset="foto/pemandangan.avif" type="image/avif">
<source srcset="foto/pemandangan.webp" type="image/webp">
<img src="foto/pemandangan.jpg" alt="Pemandangan pegunungan" width="800" height="500">
</picture>Alurnya: jika browser mendukung AVIF, pakai file itu; jika tidak, coba WebP; dan img di akhir selalu menjadi fallback yang pasti berfungsi. Aturan penting: picture harus selalu memuat elemen img sebagai anak terakhir — di situlah alt ditulis.
#Latihan: Halaman Media
Gabungkan audio dan video dalam satu halaman:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Center</title>
</head>
<body>
<h1>Media Center</h1>
<h2>Podcast Sambutan</h2>
<audio controls preload="metadata">
<source src="media/sambutan.mp3" type="audio/mpeg">
Browser kalian tidak mendukung pemutar audio.
</audio>
<h2>Video Pengenalan</h2>
<video controls width="640" preload="metadata" poster="media/poster.jpg">
<source src="media/intro.mp4" type="video/mp4">
<source src="media/intro.webm" type="video/webm">
Browser kalian tidak mendukung pemutar video.
</video>
</body>
</html>Jalankan server lokal dengan python3 -m http.server 8080 dan coba putar keduanya. Buka panel Network DevTools untuk melihat file mana yang benar-benar diunduh oleh browser kalian.
#Kesalahan Umum dan Solusinya
#Picture Tanpa img
picture tanpa img di akhir tidak menampilkan apa pun dan kehilangan tempat menulis alt. Selalu akhiri picture dengan img.
#Autoplay dengan Suara
autoplay dengan suara diblokir browser dan mengganggu. Jika harus autoplay, sertakan muted atau biarkan pengguna memulai sendiri.
#Penutup
Episode 11 memperkaya halaman kalian dengan media: audio dan video dengan kontrol bawaan, source untuk fallback format, serta picture yang memilih gambar sesuai kondisi perangkat.
Inti yang harus dibawa pulang:
audiodanvideomenampilkan kontrol dengan atributcontrols.- Gunakan beberapa
sourceuntuk dukungan format lintas browser. pictureselalu diakhiriimgsebagai fallback dan tempat menulisalt.posterdanpreload="metadata"memperbaiki pengalaman memuat video.- Hindari
autoplaydengan suara;mutedjika terpaksa.
Di episode 12 selanjutnya kita akan membahas struktur navigasi dan heading yang baik untuk SEO dan a11y — hirarki heading yang benar, elemen nav, breadcrumb, dan landmark untuk mesin pencari dan alat bantu.