Tambahkan suara dan gambar bergerak ke halaman webmu biar makin seru dan interaktif! HTML5 punya tag khusus buat ini.
16m bacaanKuis WajibMicro Badge Lesson
Oke, kita masuk ke ranah multimedia! Setelah teks, gambar, dan struktur, sekarang saatnya bikin halaman web-mu makin hidup dengan Audio dan Video. HTML5 bikin ini jadi gampang banget, lho!
Bikin Web Makin Seru dengan Audio & Video!
Website modern itu gak cuma soal teks dan gambar statis. Kadang, kita butuh nambahin elemen suara (audio) atau gambar bergerak (video) buat nyampein informasi dengan cara yang lebih menarik, ngasih hiburan, atau nunjukin demo produk.
Dulu, buat masang audio atau video di web itu ribet, sering butuh plugin pihak ketiga kayak Flash (yang sekarang udah almarhum). Tapi, berkat HTML5, kita punya tag <audio> dan <video> bawaan yang bikin prosesnya jadi jauh lebih simpel!
Menambahkan Audio dengan Tag <audio>
Mau nambahin audio latar, podcast, atau rekaman suara ke halaman webmu? Tag <audio> solusinya!
Struktur Dasar Tag <audio>:
html
<audio src="path/ke/file-audio.mp3" controls> Browser Anda tidak mendukung elemen audio. <!-- Teks ini akan tampil jika browser gak support tag <audio> --></audio>
Mari kita bedah bagian-bagiannya:
Tag <audio>: Pembungkus utama elemen audio.
Atribut src (Source): Sama kayak di <img>, atribut ini nunjukin path atau URL ke file audio yang mau diputar. Format audio yang umum didukung browser antara lain:
MP3 (.mp3): Format paling populer, kompresi bagus, didukung luas.
WAV (.wav): Kualitas tinggi (lossless), tapi ukuran file biasanya besar.
Ogg Vorbis (.ogg): Format open-source, kualitas bagus, didukung banyak browser modern.
Atribut controls: Ini atribut boolean (cukup ditulis aja). Kalau ada, browser bakal nampilin kontrol audio standar kayak tombol play/pause, volume, progress bar. Tanpa controls, audionya gak bakal keliatan atau bisa diinteraksiin sama pengguna (kecuali kamu kontrol pake JavaScript).
Teks Fallback: Teks yang ada di antara <audio> dan </audio> bakal tampil kalau browser pengunjung ternyata jadul banget dan gak ngedukung elemen <audio> sama sekali.
Atribut Tambahan yang Berguna buat <audio>:
autoplay: Atribut boolean. Kalau ada, audio bakal otomatis diputar pas halaman selesai loading.
PERHATIAN BESAR!autoplay audio itu seringkali ngeselin buat pengunjung. Banyak browser modern juga ngeblok autoplay audio kalau gak ada interaksi pengguna dulu (misal, klik). Gunakan dengan sangat hati-hati dan pertimbangkan pengalaman pengguna. Kalaupun mau pake, biasanya lebih sopan kalau di-mute dulu (muted).
loop: Atribut boolean. Kalau ada, audio bakal otomatis ngulang dari awal pas udah selesai diputar.
muted: Atribut boolean. Kalau ada, audio bakal di-mute (gak ada suara) secara default pas pertama kali dimuat. Pengguna bisa nge-unmute lewat kontrolnya.
preload: Nentuin gimana browser harus nge-load file audio pas halaman dimuat. Nilainya bisa:
"none": Jangan preload audio. Baru di-load pas pengguna nge-klik play. Hemat bandwidth.
"metadata": Cuma preload metadata audio (durasi, judul, dll.), bukan data audionya.
"auto" (default): Browser bebas mutusin seberapa banyak audio yang mau di-preload. Bisa jadi nge-load seluruh file.
Menyediakan Beberapa Format Audio dengan Elemen <source>:
Gak semua browser ngedukung semua format audio. Biar lebih aman dan kompatibel, kamu bisa nyediain beberapa format audio yang berbeda pake elemen <source> di dalem tag <audio>. Browser bakal otomatis milih format pertama yang dia dukung.
Kalau pake <source>, atribut src di tag <audio>-nya gak perlu diisi lagi.
html
<audio controls> <source src="laguku.ogg" type="audio/ogg"> <source src="laguku.mp3" type="audio/mpeg"> Browser Anda tidak mendukung elemen audio.</audio>
Browser akan coba muter laguku.ogg dulu. Kalau gak bisa, dia coba laguku.mp3. Atribut type di <source> (MIME type) itu opsional tapi disarankan, ngebantu browser ngenalin formatnya lebih cepat.
Menampilkan Video dengan Tag <video>
Mau nampilin video tutorial, klip video, atau rekaman acara di websitemu? Tag <video> siap membantu! Cara kerjanya mirip banget sama tag <audio>.
Struktur Dasar Tag <video>:
html
<video src="path/ke/file-video.mp4" controls width="640" height="360"> Browser Anda tidak mendukung elemen video.</video>
Tag <video>: Pembungkus utama elemen video.
Atribut src: Path atau URL ke file video. Format video yang umum didukung:
MP4 (.mp4) (dengan H.264 codec): Format paling populer, kualitas bagus, kompresi efisien, didukung sangat luas.
WebM (.webm) (dengan VP8/VP9 codec): Format open-source, alternatif bagus buat MP4, didukung browser modern.
Ogg Theora (.ogv): Format open-source lain, tapi dukungannya mungkin gak seluas MP4 atau WebM.
Atribut controls: Sama kayak di <audio>, nampilin kontrol video standar (play/pause, volume, progress bar, fullscreen).
Atribut width dan height: Nentuin dimensi (lebar dan tinggi) player video dalam pixel.
Penting buat ngasih dimensi biar layout gak "loncat" pas video di-load.
Kalau cuma ngasih salah satu (misal, width aja), browser biasanya akan ngitung dimensi satunya biar rasio aspek video terjaga. Tapi, lebih baik kasih dua-duanya atau atur pake CSS buat kontrol responsif.
Teks Fallback: Tampil kalau browser gak support tag <video>.
Atribut Tambahan yang Berguna buat <video> (mirip <audio>):
autoplay: Video otomatis diputar.
PERHATIANNYA LEBIH BESAR LAGI! Autoplay video (apalagi yang ada suaranya) itu jauh lebih ngeselin daripada audio. Hampir semua browser modern ngeblok autoplay video dengan suara kecuali ada interaksi pengguna atau kalau videonya di-muted.
preload: ("none", "metadata", "auto") Cara browser nge-load video.
poster: Atribut yang nilainya adalah URL ke sebuah gambar. Gambar ini bakal tampil sebagai placeholder di area video sebelum video mulai di-load atau sebelum pengguna nge-klik play. Berguna buat nampilin preview atau thumbnail video.
html
<video src="tutorial.mp4" controls width="640" height="360" poster="thumbnail-tutorial.jpg"> Browser Anda tidak mendukung elemen video.</video>
Menyediakan Beberapa Format Video dengan Elemen <source>:
Sama kayak audio, kamu bisa nyediain beberapa format video pake <source> biar kompatibilitasnya lebih luas.
html
<video controls width="1280" height="720" poster="preview.jpg"> <source src="rekamanku.webm" type="video/webm"> <source src="rekamanku.mp4" type="video/mp4"> Maaf, browser Anda tidak mendukung pemutaran video ini.</video>
Menambahkan Teks (Subtitles/Captions) pada Video dengan Elemen <track>
Buat bikin videomu lebih aksesibel (misalnya buat teman-teman Tuli atau yang nonton tanpa suara) atau buat nyediain terjemahan, kamu bisa nambahin file teks (subtitle atau caption) pake elemen <track>.
File teks ini biasanya formatnya WebVTT (.vtt).
Atribut src: Path ke file .vtt.
Atribut kind: Jenis track teksnya. Bisa:
"subtitles": Terjemahan dialog (buat bahasa beda).
"captions": Transkripsi dialog, plus deskripsi suara penting lainnya (buat yang gak bisa denger).
"descriptions": Deskripsi audio visual (buat yang gak bisa liat videonya).
"chapters": Judul bab buat navigasi di video.
"metadata": Data buat dibaca skrip (gak tampil ke user).
Atribut srclang: Kode bahasa track teksnya (misal, "en" buat Inggris, "id" buat Indonesia). Wajib ada kalau kind="subtitles".
Atribut label: Judul track yang tampil di menu pilihan subtitle/caption di player video.
Atribut default: Atribut boolean. Kalau ada, track ini bakal aktif secara default.
Contoh Penggunaan <track>:
html
<video controls width="640" height="360" poster="video-demo.jpg"> <source src="demo-produk.mp4" type="video/mp4"> <source src="demo-produk.webm" type="video/webm"> <track kind="captions" src="captions-id.vtt" srclang="id" label="Bahasa Indonesia (Captions)" default> <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English (Subtitles)"> Browser Anda tidak mendukung video ini.</video>
Pengguna nanti bisa milih mau nampilin caption Bahasa Indonesia atau subtitle Bahasa Inggris lewat kontrol video.
Format WebVTT (.vtt) Sederhana:
File .vtt itu file teks biasa. Contoh isinya:
vtt
WEBVTT00:00:01.000 --> 00:00:04.500Halo semua, selamat datang di video tutorial ini!00:00:05.000 --> 00:00:08.000Hari ini kita akan belajar tentang HTML5 Video.
Baris pertama wajib WEBVTT. Terus ada blok waktu (mulai --> selesai) dan teks yang mau tampil di rentang waktu itu.
Pertimbangan Performa dan User Experience
Ukuran File: File audio dan video bisa gede banget! Kompres file-mu seoptimal mungkin tanpa ngorbanin kualitas terlalu banyak. Ukuran file gede = loading lama = pengunjung kabur.
Jangan Autoplay dengan Suara: Udah dibilang berkali-kali, ini penting! Kalaupun mau autoplay, pastikan muted.
Sediakan Kontrol: Selalu kasih controls biar pengguna punya kendali penuh.
Pikirkan Pengguna Mobile: Pengguna mobile mungkin punya kuota terbatas atau koneksi lambat. Pertimbangkan preload="none" atau preload="metadata".
Aksesibilitas: Gunakan <track> buat subtitle/caption. Pastikan kontrolnya bisa diakses pake keyboard.
Dengan tag <audio>, <video>, dan <track>, kamu punya alat yang powerful buat nambahin konten multimedia ke websitemu. Gunakan dengan bijak, dan websitemu bakal jadi lebih kaya, interaktif, dan informatif!
Selanjutnya, kita bakal ngobrol soal cara nyisipin konten dari website lain (kayak video YouTube atau peta Google Maps) pake <iframe>.
Checkpoint KuisTarget: 70%
Kuis Audio & Video HTML
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
