BAB 11 : ELEMEN AUDIO DAN VIDEO DALAM HTML
1. Pengertian Elemen Multimedia
Multimedia adalah kombinasi berbagai jenis media digital, seperti:
- Teks
- Gambar
- Audio (suara)
- Video (gambar bergerak)
HTML menyediakan elemen khusus untuk menampilkan audio dan video secara langsung di browser, yaitu:
<audio>untuk suara<video>untuk video
Dengan elemen ini, kita tidak perlu lagi menggunakan plugin tambahan seperti Adobe Flash (yang kini sudah tidak digunakan).
2. Manfaat Audio dan Video pada Website
Audio dan video banyak digunakan pada berbagai jenis website, seperti:
- Website pembelajaran online
- Profil perusahaan
- Website berita
- Website sekolah
- Podcast
- Streaming video
- Landing page produk
Contoh penggunaan nyata:
- Guru menyisipkan rekaman penjelasan materi.
- Sekolah menampilkan video profil.
- Perusahaan memutar video promosi.
- Toko online menampilkan video review produk.
3. Elemen Audio HTML
3.1 Pengertian Tag <audio>
Tag <audio> digunakan untuk menampilkan file suara yang dapat diputar langsung di browser.
Sintaks Dasar
<audio controls>
<source src="audio/lagu.mp3" type="audio/mpeg">
</audio>3.2 Atribut Penting pada Audio
| Atribut | Fungsi |
|---|---|
controls | Menampilkan tombol play/pause |
autoplay | Memutar otomatis |
loop | Mengulang terus |
muted | Audio dimulai tanpa suara |
preload | Mengatur pemuatan file |
3.3 Contoh Audio Sederhana
<audio controls>
<source src="assets/audio/lagu.mp3" type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>3.4 Contoh Audio dengan Loop
<audio controls loop>
<source src="assets/audio/background.mp3" type="audio/mpeg">
</audio>3.5 Contoh Audio Autoplay (Muted)
<audio autoplay muted controls>
<source src="assets/audio/pembuka.mp3" type="audio/mpeg">
</audio>Catatan: Banyak browser hanya mengizinkan autoplay jika audio dalam keadaan muted.
4. Elemen Video HTML
4.1 Pengertian Tag <video>
Tag <video> digunakan untuk menampilkan file video secara langsung di browser.
Sintaks Dasar
<video controls width="640">
<source src="assets/video/profil-sekolah.mp4" type="video/mp4">
</video>4.2 Atribut Penting pada Video
| Atribut | Fungsi |
|---|---|
controls | Menampilkan kontrol video |
width | Lebar video |
height | Tinggi video |
autoplay | Memutar otomatis |
loop | Mengulang video |
muted | Video tanpa suara |
poster | Gambar thumbnail sebelum diputar |
4.3 Contoh Video Sederhana
<video controls width="500">
<source src="assets/video/tutorial.mp4" type="video/mp4">
Browser Anda tidak mendukung video.
</video>4.4 Contoh Video dengan Poster
<video controls width="600" poster="assets/img/thumbnail.jpg">
<source src="assets/video/company-profile.mp4" type="video/mp4">
</video>4.5 Contoh Video Autoplay Loop
<video autoplay muted loop width="600">
<source src="assets/video/banner.mp4" type="video/mp4">
</video>5. Struktur Folder Assets untuk Multimedia
Struktur folder yang disarankan:
project/
├── index.html
└── assets/
├── audio/
│ └── lagu.mp3
├── video/
│ └── profil.mp4
└── img/
└── thumbnail.jpgContoh pemanggilan:
<audio controls>
<source src="assets/audio/lagu.mp3" type="audio/mpeg">
</audio>
<video controls width="640">
<source src="assets/video/profil.mp4" type="video/mp4">
</video>6. Format File yang Didukung
Audio
- MP3 (
audio/mpeg) - OGG (
audio/ogg) - WAV (
audio/wav)
Video
- MP4 (
video/mp4) - WebM (
video/webm) - OGG (
video/ogg)
Rekomendasi industri:
- Audio: MP3
- Video: MP4 (H.264)
7. Menyediakan Beberapa Format Sekaligus
Audio
<audio controls>
<source src="audio/lagu.mp3" type="audio/mpeg">
<source src="audio/lagu.ogg" type="audio/ogg">
Browser Anda tidak mendukung audio.
</audio>Video
<video controls width="640">
<source src="video/tutorial.mp4" type="video/mp4">
<source src="video/tutorial.webm" type="video/webm">
Browser Anda tidak mendukung video.
</video>8. Studi Kasus Nyata
8.1 Website Sekolah
<h2>Sambutan Kepala Sekolah</h2>
<audio controls>
<source src="assets/audio/sambutan.mp3" type="audio/mpeg">
</audio>
<h2>Video Profil Sekolah</h2>
<video controls width="700" poster="assets/img/sekolah.jpg">
<source src="assets/video/profil-sekolah.mp4" type="video/mp4">
</video>8.2 Website Pembelajaran
<h2>Materi Listening Bahasa Inggris</h2>
<audio controls>
<source src="assets/audio/listening.mp3" type="audio/mpeg">
</audio>
<h2>Video Penjelasan Materi</h2>
<video controls width="600">
<source src="assets/video/penjelasan.mp4" type="video/mp4">
</video>9. Best Practice Industri
✔ Gunakan folder assets/audio dan assets/video
✔ Kompres file multimedia
- Audio < 5 MB
- Video secukupnya agar cepat dimuat
✔ Gunakan atribut poster pada video
✔ Sertakan teks cadangan
Browser Anda tidak mendukung video.✔ Hindari autoplay dengan suara
10. Kesalahan Umum Siswa
❌ Salah path file
<source src="video.mp4">Padahal file ada di:
assets/video/video.mp4❌ Tidak menggunakan controls
Akibatnya pengguna tidak dapat memutar media.
❌ Format file tidak didukung
❌ Ukuran file terlalu besar
Website menjadi lambat.
11. Debugging Multimedia
Jika audio/video tidak tampil:
- Periksa path file.
- Periksa ekstensi file.
- Pastikan browser mendukung format tersebut.
- Buka Developer Tools → Console.
12. Contoh Program Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Multimedia HTML</title>
</head>
<body>
<h1>Website Multimedia Sekolah</h1>
<h2>Audio Sambutan</h2>
<audio controls>
<source src="assets/audio/sambutan.mp3" type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>
<h2>Video Profil Sekolah</h2>
<video controls width="700" poster="assets/img/thumbnail.jpg">
<source src="assets/video/profil.mp4" type="video/mp4">
Browser Anda tidak mendukung video.
</video>
</body>
</html>13. Latihan Siswa
Latihan 1
Tampilkan satu file audio dengan controls.
Latihan 2
Tampilkan satu file video dengan poster.
Latihan 3
Buat halaman multimedia sekolah yang berisi audio dan video.
14. Mini Project
🎯 “Website Profil Sekolah Multimedia”
Fitur:
- Logo sekolah
- Audio sambutan kepala sekolah
- Video profil sekolah
- Navigasi antar halaman
15. Kesimpulan
HTML menyediakan elemen multimedia:
<audio>untuk suara<video>untuk video
Elemen ini membuat website lebih interaktif, menarik, dan profesional.