HTML Audio Video Iframe Embedded Content Accessibility Security

Definisi

Halaman ini membahas elemen HTML yang dipakai untuk media dan konten tertanam:

• audio untuk audio
• video untuk video
• source untuk menyediakan beberapa format sumber
• track untuk subtitle, caption, chapter, dan metadata teks
• iframe untuk 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

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 preload
• metadata — ambil metadata saja
• auto — 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
    kind="captions"
    src="demo-id.vtt"
    srclang="id"
    label="Bahasa Indonesia"
    default
  />
  Browser Anda tidak mendukung elemen video.
</video>

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 muted dan playsinline untuk 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 source tanpa 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 berbeda
• captions — teks untuk membantu ketika audio tidak bisa didengar, termasuk dialog dan suara penting
• descriptions — deskripsi audio-visual untuk membantu pengguna yang tidak melihat isi visual dengan baik
• chapters — penanda bab/segmen
• metadata — 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 sandbox sejauh mungkin
• jangan memasukkan input pengguna mentah ke src
• audit parameter allow satu 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="episode-1.mp4" type="video/mp4" />
    <track
      kind="captions"
      src="episode-1-id.vtt"
      srclang="id"
      label="Bahasa Indonesia"
      default
      /
    >
    <p>
      Browser Anda tidak mendukung video HTML. Silakan unduh versi alternatif di
      <a href="episode-1.mp4">tautan ini</a>.
    </p>
  </video>
  <figcaption>Episode 1: pengantar arsitektur aplikasi.</figcaption>
</figure>

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

• audio dan video dipakai untuk media yang memang perlu diputar di browser
• source dipakai untuk menyediakan beberapa format
• track dipakai untuk captions, subtitles, chapter, dan metadata teks
• iframe dipakai 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, dan iframe