HTML 04B: Memasang Audio dan Video

Setelah memahami gambar, sekarang kita mempelajari media yang dapat diputar. Browser menyediakan pemutar audio dan video bawaan sehingga kita tidak perlu membuat kontrol dari nol.

Tujuan Belajar

• Memasang audio dan video dengan kontrol.
• Menyediakan beberapa format melalui source.
• Menambahkan poster dan caption.
• Memahami alasan autoplay sebaiknya dihindari.

1. Memasang Audio

Atribut controls menampilkan tombol putar, jeda, volume, dan durasi. Browser memilih source pertama yang formatnya didukung. Teks terakhir menjadi fallback.

2. Memasang Video

poster ditampilkan sebelum video diputar. Internal CSS pada dokumen yang sama memakai max-width: 100% agar video tidak keluar dari layar.

3. Caption untuk Aksesibilitas

Caption membantu pengguna yang tidak dapat mendengar audio, berada di tempat ramai, atau belum memahami pelafalan pembicara.

caption-id.vtt tetap berupa nama file contoh karena caption harus dibuat sesuai isi dan bahasa video Anda. File audio, video, dan poster berasal dari MDN Learning Area yang menggunakan lisensi CC0 1.0.

Hindari Autoplay Bersuara

Video yang tiba-tiba bersuara mengganggu pengguna dan sering diblokir browser. Jika autoplay benar-benar diperlukan untuk video dekoratif, biasanya video harus muted, tetapi tetap pertimbangkan konsumsi data.

Latihan

Buat satu pemutar video dengan controls, dua source, sebuah poster, dan fallback. Tambahkan CSS agar lebarnya responsif.

Rangkuman

Gunakan elemen media bawaan, sediakan format yang sesuai, dan jangan melupakan caption. Media yang baik harus bisa dikontrol pengguna.