09. HTML Audio and Video
HTML menyediakan elemen khusus untuk menampilkan audio dan video secara langsung di halaman web tanpa harus menggunakan plugin tambahan.
Pada materi ini kita akan mempelajari:
<audio> <source> <track> <video>1. Overview
HTML Audio and Video digunakan untuk menampilkan media seperti musik, podcast, rekaman suara, video pembelajaran, dokumentasi, dan konten multimedia lainnya pada halaman web.
Elemen utama yang digunakan adalah <audio> untuk suara dan <video> untuk video.
Kedua elemen tersebut dapat menggunakan <source> untuk menyediakan beberapa format media.
Untuk subtitle atau caption pada video, kita dapat menggunakan <track>.
Hubungan antar elemen
<audio>
└── <source>
</audio>
<video>
├── <source>
└── <track>
</video>
| Elemen | Fungsi | Contoh Penggunaan |
|---|---|---|
| <audio> | Memutar suara/audio | Musik, podcast, murotal, rekaman |
| <source> | Menyediakan sumber media | MP3, OGG, MP4, WebM |
| <track> | Menambahkan subtitle/caption | Subtitle video |
| <video> | Memutar video | Tutorial, dokumentasi, pembelajaran |
2. <audio> — Memutar Audio
Elemen <audio> digunakan untuk memasukkan file suara ke dalam halaman HTML.
Contoh penggunaan:
- Musik
- Podcast
- Rekaman suara
- Murotal Al-Qur'an
- Audio pembelajaran
- Efek suara
Sintaks paling sederhana
<audio
src="lagu.mp3"
controls>
</audio>
Penjelasan
src menentukan lokasi file audio.
controls menampilkan kontrol seperti play, pause, volume, dan progress.
Contoh audio dengan controls
<audio
controls
src="audio/lagu.mp3">
Browser Anda tidak mendukung audio.
</audio>
Sebaiknya gunakan controls jika pengguna memang perlu mengontrol pemutaran audio.
Atribut penting <audio>
| Atribut | Fungsi | Contoh |
|---|---|---|
| controls | Menampilkan kontrol audio | controls |
| autoplay | Mencoba memulai audio otomatis | autoplay |
| loop | Mengulang audio | loop |
| muted | Memulai audio dalam keadaan mute | muted |
| preload | Memberi petunjuk bagaimana media dipersiapkan browser | preload="metadata" |
Audio dengan Loop
Jika ingin audio diputar kembali secara otomatis setelah selesai, gunakan atribut loop.
<audio
controls
loop
src="background.mp3">
</audio>
Audio dengan Muted
<audio
controls
muted
src="audio.mp3">
</audio>
Atribut muted membuat media dalam keadaan tidak bersuara saat mulai diputar.
3. <source> — Menyediakan Sumber Media
Elemen <source> digunakan untuk menyediakan satu atau beberapa sumber media.
Ini berguna ketika kita ingin menyediakan beberapa format file sehingga browser dapat memilih format yang didukung.
Contoh audio dengan beberapa source
<audio controls>
<source
src="audio.mp3"
type="audio/mpeg">
<source
src="audio.ogg"
type="audio/ogg">
Browser Anda tidak mendukung audio.
</audio>
Penjelasan setiap bagian
src adalah lokasi file.
type memberi tahu browser jenis media yang digunakan.
Browser akan mencari source yang dapat digunakan.
Kenapa menyediakan beberapa format?
Browser dan lingkungan pengguna dapat memiliki dukungan format media yang berbeda.
Dengan beberapa <source>, kita dapat memberikan alternatif.
Format Audio yang Umum
| Format | MIME Type | Umum Digunakan Untuk |
|---|---|---|
| MP3 | audio/mpeg | Musik, podcast, audio web |
| OGG | audio/ogg | Audio web |
| WAV | audio/wav | Audio berkualitas tinggi / tanpa kompresi lossy |
4. <track> — Subtitle dan Caption
Elemen <track> digunakan untuk menyediakan teks yang berkaitan dengan media, terutama video.
Contohnya:
- Subtitle
- Caption
- Deskripsi
- Chapter
Contoh sederhana
<video controls>
<source
src="video.mp4"
type="video/mp4">
<track
src="subtitle-id.vtt"
kind="subtitles"
srclang="id"
label="Bahasa Indonesia">
</video>
Penjelasan atribut track
| Atribut | Fungsi |
|---|---|
| src | Lokasi file WebVTT |
| kind | Jenis text track |
| srclang | Kode bahasa |
| label | Nama yang ditampilkan kepada pengguna |
| default | Menjadikan track sebagai pilihan default |
Apa itu file .vtt?
Subtitle pada <track> biasanya menggunakan format WebVTT.
Contoh isi file:
WEBVTT 00:00:01.000 --> 00:00:04.000 Selamat datang di tutorial HTML. 00:00:05.000 --> 00:00:08.000 Hari ini kita belajar Audio dan Video. 00:00:09.000 --> 00:00:12.000 Mari kita mulai.
Simpan isi tersebut sebagai:
subtitle-id.vtt
Kemudian hubungkan file tersebut dengan atribut src pada <track>.
Jenis <track>
<track kind="subtitles"> <track kind="captions"> <track kind="descriptions"> <track kind="chapters"> <track kind="metadata">
Untuk subtitle bahasa berbeda, penggunaan kind="subtitles" adalah contoh yang umum.
5. <video> — Menampilkan Video
Elemen <video> digunakan untuk menampilkan video secara langsung pada halaman web.
Contoh penggunaannya:
- Video tutorial
- Video pembelajaran
- Dokumentasi
- Video presentasi
- Video produk
- Video pendek
Sintaks dasar
<video
controls
src="video.mp4">
Browser Anda tidak mendukung video.
</video>
controls
Atribut controls menampilkan kontrol pemutar video.
<video controls>
<source
src="tutorial.mp4"
type="video/mp4">
</video>
Mengatur ukuran video
<video
controls
width="800"
height="450">
<source
src="tutorial.mp4"
type="video/mp4">
</video>
Namun untuk website responsive, CSS biasanya digunakan agar video tidak melebihi lebar layar.
video {
max-width: 100%;
height: auto;
}
poster — Gambar Sebelum Video Diputar
Atribut poster menentukan gambar yang ditampilkan sebelum video mulai diputar.
<video
controls
poster="thumbnail.jpg">
<source
src="tutorial.mp4"
type="video/mp4">
</video>
Jika video tutorial memiliki thumbnail, gunakan poster agar halaman tidak menampilkan frame video secara acak sebelum video dimainkan.
loop — Mengulang Video
<video
controls
loop>
<source
src="demo.mp4"
type="video/mp4">
</video>
muted — Mematikan Suara
<video
controls
muted>
<source
src="demo.mp4"
type="video/mp4">
</video>
autoplay — Memulai Otomatis
<video
autoplay
muted
loop
playsinline>
<source
src="background.mp4"
type="video/mp4">
</video>
Browser dapat membatasi pemutaran otomatis, terutama jika media memiliki suara.
Untuk video background yang otomatis berjalan, pola yang umum adalah menggunakan muted dan, untuk konteks tertentu, playsinline.
playsinline — Pemutaran Inline
<video
controls
playsinline>
<source
src="video.mp4"
type="video/mp4">
</video>
Atribut playsinline memberi tahu browser bahwa video dapat diputar di dalam konteks halaman, khususnya penting pada perangkat mobile.
Video dengan Beberapa Source
<video controls>
<source
src="video.mp4"
type="video/mp4">
<source
src="video.webm"
type="video/webm">
Browser Anda tidak mendukung video.
</video>
Video + Subtitle
<video
controls
poster="thumbnail.jpg">
<source
src="tutorial.mp4"
type="video/mp4">
<track
src="subtitle-id.vtt"
kind="subtitles"
srclang="id"
label="Bahasa Indonesia"
default>
<track
src="subtitle-en.vtt"
kind="subtitles"
srclang="en"
label="English">
Browser Anda tidak mendukung video.
</video>
Format Video yang Umum
| Format | MIME Type | Kegunaan |
|---|---|---|
| MP4 | video/mp4 | Sangat umum digunakan untuk video web |
| WebM | video/webm | Format yang dirancang untuk web |
Contoh Praktis 1 — Audio Pembelajaran
Misalnya kita memiliki website pembelajaran dan ingin menyediakan rekaman audio.
<section>
<h2>
Audio Pembelajaran HTML
</h2>
<p>
Dengarkan penjelasan materi berikut.
</p>
<audio controls preload="metadata">
<source
src="audio/html-dasar.mp3"
type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>
</section>
Mengapa menggunakan preload="metadata"?
Nilai metadata meminta browser untuk mengambil informasi metadata media tanpa harus langsung mengunduh seluruh isi audio.
Contoh Praktis 2 — Video Tutorial
<section>
<h2>
Tutorial Membuat Website
</h2>
<video
controls
width="800"
poster="thumbnail.jpg">
<source
src="tutorial.mp4"
type="video/mp4">
Browser Anda tidak mendukung video.
</video>
</section>
Contoh Praktis 3 — Video dengan Subtitle
<video
controls
poster="thumbnail.jpg">
<source
src="tutorial.mp4"
type="video/mp4">
<track
src="subtitle-id.vtt"
kind="subtitles"
srclang="id"
label="Bahasa Indonesia"
default>
<track
src="subtitle-en.vtt"
kind="subtitles"
srclang="en"
label="English">
Browser Anda tidak mendukung video.
</video>
Contoh Praktis 4 — Media Player Lengkap
Berikut contoh struktur yang lebih lengkap untuk sebuah video pembelajaran.
<article>
<h2>
Belajar HTML Dasar
</h2>
<p>
Pada video ini kita akan mempelajari
dasar-dasar HTML.
</p>
<video
controls
preload="metadata"
poster="thumbnail.jpg"
width="1280"
height="720"
playsinline>
<source
src="html-dasar.mp4"
type="video/mp4">
<source
src="html-dasar.webm"
type="video/webm">
<track
src="subtitle-id.vtt"
kind="subtitles"
srclang="id"
label="Bahasa Indonesia"
default>
<track
src="subtitle-en.vtt"
kind="subtitles"
srclang="en"
label="English">
Browser Anda tidak mendukung video.
</video>
<p>
Gunakan tombol subtitle jika ingin
menampilkan teks terjemahan.
</p>
</article>
Membuat Audio dan Video Responsive
Media sebaiknya dapat menyesuaikan ukuran layar. Untuk video, kita dapat menggunakan CSS:
video {
display: block;
max-width: 100%;
height: auto;
}
Dengan aturan tersebut, video tidak akan melebihi lebar container pada layar kecil.
Contoh responsive
<video
controls
width="1280"
height="720"
style="max-width:100%;height:auto;">
<source
src="video.mp4"
type="video/mp4">
</video>
Accessibility pada Audio dan Video
Media sebaiknya tidak hanya dapat diputar, tetapi juga dapat dipahami oleh pengguna dengan kebutuhan aksesibilitas yang berbeda.
Gunakan subtitle
<track
src="subtitle-id.vtt"
kind="subtitles"
srclang="id"
label="Bahasa Indonesia"
default>
Gunakan teks fallback
<video controls>
<source
src="video.mp4"
type="video/mp4">
Browser Anda tidak mendukung
pemutaran video HTML5.
</video>
Hindari audio otomatis yang mengganggu
Audio yang langsung berbunyi ketika halaman dibuka dapat mengganggu pengguna, terutama ketika pengguna membuka halaman di tempat umum.
Kesalahan yang Sering Terjadi
1. File tidak ditemukan
<audio src="musik.mp3"></audio>
Pastikan lokasi file benar dan URL dapat diakses oleh browser.
2. Lupa controls
<video src="video.mp4"></video>
Video dapat memiliki kontrol yang tidak terlihat jika controls tidak digunakan.
3. Source salah
<source
src="video.mp4"
type="audio/mpeg">
Jangan memberikan MIME type audio untuk file video.
Contoh yang benar:
<source
src="video.mp4"
type="video/mp4">
4. Subtitle tidak muncul
Periksa lokasi file .vtt, format WebVTT, bahasa, dan atribut track.
Perbedaan Audio dan Video
| Fitur | <audio> | <video> |
|---|---|---|
| Audio | Ya | Ya |
| Gambar/video | Tidak | Ya |
| controls | Ya | Ya |
| <source> | Ya | Ya |
| <track> | Tidak menjadi pola utama | Ya |
| poster | Tidak | Ya |
| Subtitle | Tidak | Ya |
Ringkasan Atribut Penting
| Atribut | Audio | Video | Fungsi |
|---|---|---|---|
| controls | ✓ | ✓ | Menampilkan kontrol media |
| autoplay | ✓ | ✓ | Mencoba memutar otomatis |
| loop | ✓ | ✓ | Mengulang media |
| muted | ✓ | ✓ | Memulai dalam keadaan mute |
| preload | ✓ | ✓ | Petunjuk pemuatan media |
| poster | — | ✓ | Gambar sebelum video diputar |
| playsinline | — | ✓ | Pemutaran video secara inline |
Best Practice HTML Audio dan Video
1. Gunakan controls
Jika pengguna perlu mengontrol media, berikan kontrol pemutaran yang jelas.
2. Gunakan beberapa source jika diperlukan
Beberapa source dapat memberikan alternatif format yang sesuai dengan dukungan browser.
3. Gunakan subtitle untuk video
Subtitle membuat video lebih mudah dipahami oleh pengguna yang tidak dapat atau tidak ingin mendengarkan audio.
4. Gunakan poster pada video
Poster memberikan tampilan awal yang lebih informatif sebelum video dimainkan.
5. Perhatikan ukuran file
File audio dan video berukuran besar dapat memperlambat halaman. Gunakan resolusi dan bitrate yang sesuai dengan kebutuhan.
6. Hindari autoplay dengan suara
Pemutaran otomatis dengan suara dapat mengganggu pengguna dan dapat dibatasi oleh browser.
Struktur HTML Audio dan Video
<audio controls>
<source
src="audio.mp3"
type="audio/mpeg">
<source
src="audio.ogg"
type="audio/ogg">
Browser tidak mendukung audio.
</audio>
<video
controls
poster="thumbnail.jpg">
<source
src="video.mp4"
type="video/mp4">
<source
src="video.webm"
type="video/webm">
<track
src="subtitle-id.vtt"
kind="subtitles"
srclang="id"
label="Bahasa Indonesia"
default>
Browser tidak mendukung video.
</video>
Summary
| Elemen | Fungsi Utama |
|---|---|
| <audio> | Memutar file audio |
| <source> | Menyediakan sumber atau format media |
| <track> | Menambahkan subtitle, caption, chapter, atau text track lainnya |
| <video> | Memutar file video |
Cara Mudah Mengingat
<audio>
= SUARA
<video>
= VIDEO
<source>
= SUMBER FILE
<track>
= SUBTITLE / CAPTION
AUDIO
↓
<audio>
↓
<source>
VIDEO
↓
<video>
├── <source>
└── <track>
HTML menyediakan elemen khusus untuk menangani multimedia melalui <audio> dan <video>.
Gunakan <source> ketika ingin menyediakan beberapa sumber atau format media.
Gunakan <track> untuk menyediakan subtitle, caption, chapter, atau text track lainnya pada video.
Untuk video yang digunakan dalam tutorial atau pembelajaran, kombinasi <video> + <source> + <track> + poster merupakan struktur yang sangat berguna.
Selalu perhatikan ukuran file, responsive design, aksesibilitas, subtitle, dan pengalaman pengguna ketika menambahkan audio atau video ke website.