Tutorial HTML / Menyematkan audio, video, dan konten eksternal

Tutorial HTML

Dibuat 2026-11-02 Terakhir Diubah 2026-11-02

HTML dapat memutar file media dengan audio dan video atau menampilkan dokumen lain di dalam halaman dengan iframe. Pemasangan yang berhasil bergantung pada jalur file yang sebenarnya dan format yang didukung. Kontrol yang berguna, subtitle atau transkripsi, serta keandalan konten eksternal juga penting.

Memutar file audio dan video

Contoh ini mengasumsikan bahwa sample.mp3, sample.mp4, dan sample-poster.webp berada di samping file HTML. Untuk menjalankannya, sediakan file yang dapat Anda gunakan, dan sesuaikan nama jika diperlukan. Media juga membutuhkan nama file, jalur, dan ukuran yang benar, sesuai dengan prinsip Gambar: img, Teks Alternatif, dan Ukuran.

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  Peramban Anda tidak mendukung pemutaran audio.
</audio>

<video controls width="640" height="360" poster="sample-poster.webp">
  <source src="sample.mp4" type="video/mp4">
  <track src="sample-id.vtt" kind="captions" srclang="id-ID"
         label="Subtitle bahasa Indonesia" default>
  Peramban Anda tidak mendukung pemutaran video.
</video>

controls menyediakan kontrol pemutaran browser, dan poster ditampilkan sebelum pemutaran video. Untuk ucapan dan suara yang bermakna, sediakan subtitle atau takarir yang akurat. sample-id.vtt yang direferensikan tidak dibuat secara otomatis. Tanpa file ini, subtitle tidak dapat ditampilkan.

File subtitle WebVTT adalah teks UTF-8. Contoh minimal ini hanya menunjukkan satu tampilan untuk tiga detik pertama; subtitle sebenarnya harus mencakup konten yang diucapkan dalam video dan suara penting pada waktu yang sesuai.

WEBVTT

00:00:00.000 --> 00:00:03.000
Selamat datang di Taman Kecil.

Simpan teks ini sebagai sample-id.vtt dengan encoding UTF-8. Tidak boleh ada baris kosong antara baris waktu dan teks subtitle. Baris kosong hanya memisahkan blok subtitle berikutnya. Referensi WebVTT di MDN menjelaskan struktur format ini.

Jika informasi penting disampaikan melalui audio, sediakan juga transkrip teks. Biarkan pengguna memulai pemutaran sendiri, alih-alih memutar suara secara otomatis tanpa pemberitahuan. Jika Anda menawarkan beberapa format source, file yang mendasarinya harus benar-benar menggunakan format tersebut; mengganti ekstensi tidak mengonversi media.

Menyematkan konten eksternal dengan iframe

iframe menampilkan dokumen lain di dalam halaman saat ini. URL di bawah ini adalah placeholder struktural dan bukan penyematan media yang fungsional. Ganti dengan URL sematan resmi yang disediakan oleh penyedia.

<iframe
  src="https://example.com/embed/example"
  title="Presentasi konten contoh"
  width="640" height="360"
  loading="lazy"></iframe>

title menjelaskan tujuan dari frame. Penyedia dapat melarang penyematan, bahkan jika URL normal dari halamannya berfungsi. Konten eksternal dapat mempengaruhi privasi, cookie, dan kinerja, oleh karena itu gunakan hanya kode sematan resmi dari penyedia tepercaya jika memang memberikan nilai tambah. Berikan judul atau konteks dari elemen yang disematkan dalam teks sekitarnya, agar artikel tetap dapat dipahami walaupun elemen tersebut tidak dimuat.

Sesuaikan media dan uji frame lokal

Lebar HTML 640 tidak menyesuaikan secara otomatis dengan jendela tampilan yang sempit. Tambahkan CSS ini ke dalam elemen style di head atau ke file stylesheet yang terhubung. Video akan mempertahankan rasio intrinsiknya; latihan dengan iframe menggunakan kotak tampilan 16:9. Sesuaikan rasio ini jika konten yang disematkan memerlukan rasio yang berbeda.

video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

Anda dapat menguji jalur file frame, tata letak, dan navigasi alternatif tanpa file video. Simpan kedua file ini bersama-sama sebagai UTF-8. Latihan ini tidak bergantung pada layanan eksternal atau data pribadi.

embed.html

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Instruksi latihan</title>
</head>
<body>
  <h1>Instruksi untuk Taman Kecil</h1>
  <p>Contoh lokal ini ditampilkan dalam iframe.</p>
</body>
</html>

frame.html

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan tentang iframe</title>
  <style>
video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
  </style>
</head>
<body>
  <h1>Baca instruksi</h1>
  <iframe src="embed.html" title="Instruksi untuk Taman Kecil" width="640" height="360"></iframe>
  <p><a href="embed.html">Buka instruksi di halaman terpisah</a></p>
</body>
</html>

Buka frame.html dan periksa judul serta paragraf yang tertanam, lalu uji apakah bingkai menyesuaikan diri dengan jendela 390px. Selain itu, ikuti tautan ke halaman terpisah. Jika nanti Anda menggunakan penyematan eksternal, periksa URL resmi penyedia tersebut dan pedoman penyematan mereka.

WebVTT adalah format teks yang mengaitkan interval waktu dengan subtitle. Jika subtitle dari file lokal gagal, pertama-tama periksa keberadaan, ekstensi, pengkodean UTF-8, dan interval subtitle, lalu bandingkan dengan menyediakan HTML, video, dan VTT dari server pengembangan HTTP yang sama dengan asal yang sama. Pembatasan pada URL file dan jenis media dari server dapat memengaruhi pemuatan. Mengubah nama ekstensi bukanlah konversi media.

<p><a href="sample.mp4">Buka file video contoh</a></p>
<p><a href="transcript.html">Baca transkrip video</a></p>

Sesuaikan alternatif pada berkas dan transkripsi yang benar-benar telah Anda persiapkan. Teks pengganti di dalam elemen audio/video ditujukan untuk browser yang tidak mendukung elemen tersebut; ini bukan merupakan pesan kesalahan yang dijamin muncul jika browser yang kompatibel tidak dapat memuat berkas. Pastikan alternatif dan transkripsi yang diperlukan juga tersedia di luar pemutar.

Jika media tidak diputar atau tidak cocok

Periksa apakah berkas ada di jalur yang ditentukan dan server mengirimkan jenis media yang sesuai.
Periksa apakah browser mendukung pengkodean berkas yang sebenarnya dan tidak hanya ekstensi nama berkas.
Gunakan CSS untuk membatasi lebar pada layar kecil tanpa merusak rasio aspek video.
Periksa pedoman penyematan dan ketentuan penyedia untuk konten eksternal.

Lihat referensi video MDN dan referensi Iframe untuk atribut spesifik elemen. Terapkan ruang lingkup pengujian manual di Dasar-dasar Aksesibilitas: Judul, Tautan, Gambar, dan Keyboard pada kontrol pemutaran, tautan alternatif, dan penggunaan keyboard.

Tutorial HTML