HTML Audio Video Iframe Embedded Content Accessibility Security
HTML1 September 202610 menit baca
Selesai membaca dokumentasi ini?
Kembali ke rujukan utama HTML untuk melanjutkan topik lainnya.
HTML Audio Video Iframe Embedded Content Accessibility Security
Definisi
Halaman ini membahas elemen HTML yang dipakai untuk media dan konten tertanam:
audiountuk audiovideountuk videosourceuntuk menyediakan beberapa format sumbertrackuntuk subtitle, caption, chapter, dan metadata teksiframeuntuk menyematkan konten dari sumber lain
Kalau topiknya diringkas, intinya begini: gunakan elemen media saat browser memang perlu memutar file media, dan gunakan embedded content saat sumber eksternal bisa diperlakukan sebagai komponen yang aman, terkontrol, dan tidak mengganggu pengalaman pengguna.
Kapan dipakai
Gunakan audio ketika
- kontennya hanya suara
- pengguna perlu kontrol play/pause, seek, volume, dan kecepatan
- file audio memang bagian dari isi halaman, misalnya podcast, rekaman, atau sample suara
Gunakan video ketika
- kontennya visual bergerak dan audio
- poster, subtitle, atau chapter penting untuk pengalaman baca
- pembaca perlu memutar media tanpa pindah ke aplikasi lain
Gunakan iframe ketika
- konten berasal dari origin lain dan memang dirancang untuk di-embed
- sumber tersebut lebih aman dipakai sebagai embed daripada ditiru sendiri
- ada kebutuhan yang jelas, misalnya peta, player pihak ketiga, form tertanam, dashboard vendor, atau preview dokumen
Jangan dipakai kalau
- kontennya bisa disajikan lebih baik sebagai HTML biasa
- embed hanya dipakai sebagai dekorasi
- sumber tidak tepercaya atau tidak punya batasan keamanan yang jelas
- pengguna bisa terganggu oleh autoplay, tracking, atau navigasi tak terduga
Peta pemilihan media dan embedding
Loading diagram...
audio
Elemen audio dipakai untuk memutar audio di browser.
Struktur dasar
html<audio controls>
<source src="podcast.mp3" type="audio/mpeg" />
<source src="podcast.ogg" type="audio/ogg" />
Browser Anda tidak mendukung elemen audio.
</audio>Atribut penting
controls
Menampilkan kontrol bawaan browser. Untuk konten audio yang memang bisa diputar pengguna, ini hampir selalu perlu.
autoplay
Meminta browser memulai pemutaran otomatis. Ini sering diblokir browser, terutama jika audio tidak di-mute atau tidak ada interaksi pengguna.
Praktik aman:
- hindari autoplay untuk audio
- kalau benar-benar perlu, pastikan ada alasan UX yang kuat
- jangan memaksa suara muncul saat halaman dibuka
loop
Mengulang audio setelah selesai.
muted
Memulai audio dalam keadaan tanpa suara.
preload
Memberi petunjuk ke browser tentang seberapa agresif file diunduh sebelum diputar.
Nilai umum:
none— jangan preloadmetadata— ambil metadata sajaauto— browser boleh memuat lebih banyak
Untuk halaman yang sensitif bandwidth, metadata atau none sering lebih masuk akal daripada auto.
Aksesibilitas audio
Audio tanpa konteks visual tetap harus bisa dipahami.
Perhatikan:
- sediakan judul atau label yang jelas di sekitar player
- sediakan transkrip bila isi audio penting
- kalau audio mengandung instruksi, jangan bergantung pada suara saja
- pastikan kontrol keyboard tetap bisa dipakai
Kalau audio adalah konten utama, transkrip bukan bonus. Itu bagian dari aksesibilitas.
video
Elemen video dipakai untuk menampilkan media visual bergerak.
Struktur dasar
html<video controls width="640" poster="thumbnail.jpg">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm" />
<track
Atribut penting
controls
Menampilkan kontrol pemutaran bawaan. Untuk video umum, ini biasanya wajib agar pengguna bisa pause, seek, dan atur volume.
width dan height
Membantu browser menyiapkan ruang layout sebelum video dimuat, sehingga layout shift berkurang.
poster
Gambar penutup sebelum video diputar. Ini penting untuk memberi konteks visual dan mencegah area kosong yang membingungkan.
autoplay
Sama seperti audio, autoplay video sering dibatasi. Browser biasanya lebih permisif jika video dimulai dalam keadaan muted, tetapi itu tetap bukan alasan untuk memaksa autoplay.
Prinsip yang aman:
- jangan andalkan autoplay untuk pesan penting
- gunakan autoplay hanya jika benar-benar diperlukan dan tidak mengganggu
- kalau dipakai, pertimbangkan
muteddanplaysinlineuntuk pengalaman mobile
muted
Memulai video tanpa suara. Ini sering jadi syarat teknis agar autoplay diizinkan.
playsinline
Mencegah video memaksa mode layar penuh pada beberapa perangkat mobile. Ini penting untuk UX yang tetap terasa inline di halaman.
loop
Berguna untuk video pendek yang memang dimaksudkan berulang, misalnya background motion atau demo singkat.
preload
Sama seperti audio, membantu mengontrol perilaku pemuatan awal.
Aksesibilitas video
Video yang baik bukan cuma bisa diputar, tapi juga bisa dipahami.
Perhatikan:
- sediakan caption atau subtitle
- kalau ada informasi penting yang hanya terlihat di layar, jelaskan juga lewat teks pendamping
- jangan taruh instruksi penting hanya di video tanpa versi teks
- pastikan kontrol bisa diakses keyboard
- hindari video autoplay yang menciptakan gangguan untuk pembaca screen reader
source
Elemen source dipakai di dalam audio atau video untuk menyediakan beberapa format media.
Kenapa penting
Browser tidak selalu mendukung format yang sama. Dengan beberapa source, browser bisa memilih file yang paling cocok.
Contoh
html<video controls>
<source src="demo.webm" type="video/webm" />
<source src="demo.mp4" type="video/mp4" />
</video>Atribut penting
src
Alamat file media.
type
Membantu browser menilai format tanpa harus mengunduh file dulu.
media
Kadang dipakai untuk memilih sumber berdasarkan kondisi media tertentu, walau ini lebih jarang di media player umum.
Urutan source
Urutkan dari format yang paling disukai atau paling efisien untuk target browser Anda.
Praktik umum:
- sediakan lebih dari satu format kalau dukungan browser perlu dipikirkan
- letakkan fallback yang paling relevan di urutan awal
- jangan menaruh puluhan
sourcetanpa alasan; itu hanya bikin markup bising
track
Elemen track dipakai untuk menambahkan teks pendamping ke media video atau audio.
Jenis track
Nilai kind yang umum:
subtitles— terjemahan dialog untuk orang yang bisa mendengar audio, tetapi butuh bahasa berbedacaptions— teks untuk membantu ketika audio tidak bisa didengar, termasuk dialog dan suara pentingdescriptions— deskripsi audio-visual untuk membantu pengguna yang tidak melihat isi visual dengan baikchapters— penanda bab/segmenmetadata— data tambahan untuk scripting, bukan untuk dibaca pengguna langsung
Contoh
html<track
kind="captions"
src="captions-id.vtt"
srclang="id"
label="Bahasa Indonesia"
default
/>Atribut penting
src
File teks, biasanya WebVTT (.vtt).
kind
Menentukan jenis track dan bagaimana browser atau assistive tech menggunakannya.
srclang
Kode bahasa track, misalnya id atau en.
label
Nama manusiawi yang tampil di UI player.
default
Menandai track default yang dipilih browser saat pemutaran.
Captions vs subtitles
Perbedaan ini sering dicampur, padahal tidak sama:
- Subtitles: untuk penonton yang bisa mendengar audio, tetapi butuh bahasa lain
- Captions: untuk penonton yang tidak bisa mendengar audio atau butuh representasi teks yang lebih lengkap dari bunyi penting
Kalau video Anda berisi informasi penting, captions biasanya lebih tepat daripada sekadar subtitle.
Kenapa track penting
track membuat media lebih aksesibel untuk:
- pengguna tuli atau hard-of-hearing
- pengguna yang menonton tanpa suara
- pengguna yang sedang di lingkungan bising
- pengguna yang butuh navigasi chapter
Kapan konten embedded aman dipakai
iframe bukan sekadar “tempel halaman lain”. Ia membawa konteks keamanan dan perilaku browsing yang perlu dikontrol.
Aman dipakai kalau
- sumber berasal dari domain tepercaya
- embedding memang disediakan oleh penyedia konten
- Anda memahami izin dan risiko tracking yang ikut terbawa
- Anda membatasi kemampuan frame sesuai kebutuhan
Gunakan iframe dengan hati-hati
Contoh yang lebih terkontrol:
html<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Video demo produk"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>Atribut penting pada iframe
src
URL tujuan embed. Pastikan benar-benar tujuan yang dipercaya.
title
Wajib dipikirkan sebagai label aksesibilitas. Tanpa title, screen reader akan kesulitan menjelaskan isi frame.
loading="lazy"
Menunda pemuatan iframe sampai mendekati viewport. Berguna untuk performa, terutama jika ada banyak embed.
sandbox
Salah satu atribut keamanan paling penting.
sandbox membatasi kemampuan iframe. Anda bisa menambah izin secara eksplisit bila memang perlu.
Contoh:
html<iframe
src="https://example.com/embed"
title="Embed aman"
sandbox="allow-scripts allow-same-origin"
></iframe>Catatan:
- jangan menambahkan izin yang tidak dibutuhkan
- semakin longgar sandbox, semakin besar permukaan risiko
- kalau sumber tidak tepercaya, pertimbangkan batasan yang sangat ketat
allow
Mengizinkan fitur tertentu seperti autoplay, fullscreen, clipboard, atau sensor tertentu. Pakai seperlunya saja.
referrerpolicy
Mengontrol informasi referrer yang dikirim ke sumber embed.
allowfullscreen
Memberi izin fullscreen jika embed memang memerlukannya.
Risiko keamanan umum pada iframe
- Clickjacking dan UI deception: frame dapat dipakai untuk menyamarkan interaksi jika tidak dibatasi
- Tracking lintas situs: embed pihak ketiga bisa membawa skrip, cookie, dan pelacakan
- Privilege berlebihan: iframe yang terlalu longgar bisa menjalankan fitur yang tidak perlu
- Sumber tidak tepercaya: konten luar bisa berubah tanpa kontrol Anda
- XSS via embed config yang salah: terutama jika URL atau parameter dibangun dari input pengguna
Praktik aman
- izinkan embed hanya dari domain yang memang dipercaya
- gunakan
sandboxsejauh mungkin - jangan memasukkan input pengguna mentah ke
src - audit parameter
allowsatu per satu - pertimbangkan CSP (
Content-Security-Policy) untuk membatasi sumber frame - sediakan fallback bila iframe gagal dimuat
Jebakan umum
Autoplay
Autoplay sering terasa berguna untuk demo, tetapi sering jadi sumber masalah:
- diblokir browser
- mengganggu pengguna
- boros bandwidth
- bisa mengacaukan pengalaman screen reader
Kalau tidak benar-benar perlu, jangan pakai autoplay.
Tanpa fallback
Media dan embed sebaiknya punya fallback yang masuk akal:
- teks fallback di dalam
audio/video - transkrip atau ringkasan di sekitar media
- fallback link untuk membuka sumber di tab baru bila embed gagal
Mengandalkan satu format
Kalau Anda hanya menyediakan satu format media, dukungan browser bisa jadi masalah. Gunakan lebih dari satu source bila target audiens luas.
Caption yang asal ada
Caption yang tidak sinkron, tidak lengkap, atau salah bahasa sama buruknya dengan tidak ada caption. Pastikan file track benar-benar diperiksa.
Embed terlalu bebas
iframe yang asal tempel tanpa sandbox, title, dan allow yang tepat sering jadi lubang keamanan dan masalah UX.
Contoh pola praktis
Media internal
html<figure>
<video controls width="720" poster="poster-episode-1.jpg">
<source src="episode-1.webm" type="video/webm" />
<source src=
Embed eksternal yang dibatasi
html<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Demo penggunaan fitur checkout"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-presentation"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>Ringkasan cepat
audiodanvideodipakai untuk media yang memang perlu diputar di browsersourcedipakai untuk menyediakan beberapa formattrackdipakai untuk captions, subtitles, chapter, dan metadata teksiframedipakai hanya kalau embedding eksternal memang aman dan perlu- aksesibilitas media biasanya butuh label yang jelas, kontrol keyboard, transkrip, dan caption yang benar
- autoplay dan embed longgar adalah dua sumber masalah paling sering
Referensi terkait
- HTML semantics dan struktur dokumen
- HTML forms, inputs, labels, validation, dan accessibility
- HTML links, images, lists, metadata, dan semantic inline content
- MDN Web Docs:
audio,video,source,track, daniframe