Halo teman-teman semuanya, kali ini kita akan belajar bagaimana caranya menampilkan audio dan video di halaman web menggunakan HTML. Dengan elemen multimedia ini, kita bisa menambahkan suara latar, podcast, lagu, atau bahkan video tutorial langsung ke dalam website.
HTML5 sudah menyediakan tag khusus yang memudahkan kita menambahkan audio dan video tanpa bantuan plugin tambahan.
1. Menambahkan Audio dengan <audio>
Tag <audio> digunakan untuk menyisipkan file suara seperti .mp3, .ogg, atau .wav.
Contoh dasar:
<audio controls>
<source src="lagu.mp3" type="audio/mpeg">
Browser kamu tidak mendukung tag audio.
</audio>
Penjelasan:
controls - Menampilkan tombol play, pause, volume, dll.<source> - Menentukan file audio dan formatnya.- Teks alternatif akan ditampilkan jika browser tidak mendukung elemen
<audio>.
Kalau kita punya beberapa format, bisa tambahkan lebih dari satu <source>:
<audio controls>
<source src="lagu.mp3" type="audio/mpeg">
<source src="lagu.ogg" type="audio/ogg">
Browser kamu tidak mendukung audio.
</audio>
2. Menambahkan Video dengan <video>
Untuk menyisipkan video, kita gunakan tag <video>.
Contoh dasar:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Browser kamu tidak mendukung tag video.
</video>
Penjelasan:
width dan height - Ukuran tampilan video.controls - Menampilkan kontrol video (play, pause, fullscreen, dll).- Bisa juga ditambahkan atribut
autoplay, muted, dan loop.
Contoh autoplay video:
<video width="320" height="240" autoplay muted loop>
<source src="video.mp4" type="video/mp4">
</video>
3. Format yang Didukung
- Audio:
.mp3, .ogg, .wav
- Video:
.mp4, .webm, .ogg
Pastikan kamu menyimpan file dengan format yang umum dan didukung semua browser, terutama .mp3 dan .mp4.
4. Tips Penempatan File
Kalau kamu menyimpan file audio/video di folder tertentu, pastikan path-nya benar:
<video controls>
<source src="media/video-promo.mp4" type="video/mp4">
</video>
Kalau menggunakan URL eksternal (misalnya dari CDN atau file hosting), kamu juga bisa langsung pasang link-nya:
<audio controls>
<source src="https://example.com/audio/music.mp3" type="audio/mpeg">
</audio>
Kesimpulan
Dengan elemen <audio> dan <video>, kita bisa menambahkan berbagai konten multimedia ke dalam website dengan mudah.
Di artikel berikutnya, kita akan membahas Komentar dalam HTML dan Penulisan yang Rapi, supaya kode kita makin mudah dibaca.
Terima Kasih