<video> memutar video dan <audio> memutar suara langsung di halaman, tanpa plugin tambahan. Browser yang menggambar pemutarnya: tombol play, pause, volume, dan garis waktunya.
🧪 Tebakan cepat: kamu menulis
<audio src="musik.mp3"></audio>tanpa atribut lain. Apa yang kelihatan di halaman? Tebak dulu, jawabannya ada di bagian "Video dan audio, bagian per bagian".
Video dan audio, bagian per bagian
<video src="video.mp4" controls width="640" height="360">
Browser kamu tidak mendukung video.
</video>
<audio src="musik.mp3" controls>
Browser kamu tidak mendukung audio.
</audio>
Bagian per bagian:
<video>dan<audio>punya tag pembuka dan tag penutup. Semua pengaturannya ditulis sebagai atribut di tag pembuka.src="video.mp4"adalah alamat file yang diputar, ditulis langsung di tag pembukanya, sama kayaksrcdi<img>. Nama filenya harus persis, termasuk akhiran.mp4atau.mp3.controlsmemunculkan tombol play, pause, volume, dan garis waktu. Ditulis tanpa nilai. Tanpacontrols, video cuma kotak tanpa tombol dan audio gak kelihatan sama sekali, jadi pengunjung gak bisa memutarnya.width="640"danheight="360"adalah lebar dan tinggi bingkai video dalam piksel. Tulis angkanya saja, tanpapx. Dengan ukuran ini, browser menyiapkan tempatnya dari awal, jadi halaman gak loncat waktu videonya dimuat. Audio gak butuh ukuran.- Teks di antara tag pembuka dan penutup adalah teks cadangan. Teks ini cuma muncul di browser yang gak kenal
<video>atau<audio>sama sekali.
Hasilnya: bingkai video 640 kali 360 piksel lengkap dengan tombolnya, dan di bawahnya pemutar audio.
Atribut pemutaran lainnya
poster="sampul.jpg": gambar yang tampil di bingkai video sebelum diputar, kayak sampul. Khusus video.loop: begitu selesai, mulai lagi dari awal.muted: dimulai tanpa suara.autoplay: langsung diputar begitu halaman dibuka.
<video src="latar.mp4" autoplay muted loop poster="sampul.jpg"></video>
Browser memblokir autoplay yang bersuara sampai pengunjung berinteraksi dengan halaman, misalnya klik atau ketuk, biar orang gak kaget tiba-tiba ada suara. Makanya autoplay hampir selalu ditulis bersama muted.
Beberapa format file dengan <source>
<audio controls>
<source src="musik.ogg" type="audio/ogg">
<source src="musik.mp3" type="audio/mpeg">
Browser kamu tidak mendukung audio.
</audio>
Kalau kamu punya file yang sama dalam beberapa format, tulis tiap file di <source> sendiri. Browser memakai yang pertama bisa dia putar. Dengan cara ini src pindah ke <source>. Kalau latihan minta src di tag <audio> atau <video>, tulis langsung di situ, kayak contoh pertama.
⚠️ Jebakan yang sering ketemu
- Lupa
controls. Audio jadi gak kelihatan, video gak punya tombol. width="640px". Nilaiwidthdanheightdi HTML itu angka saja. Satuanpxcuma dipakai di CSS.autoplaytanpamuted. Biasanya diblokir browser, jadi videonya diam saja.- Nama file beda sedikit. Di kebanyakan server,
Musik.mp3danmusik.mp3dianggap dua file yang beda.
💡 Video yang ada suara orang bicara butuh subtitle. Tambahkan
<track kind="subtitles" src="subtitle.vtt" srclang="id">di dalam<video>, biar videonya tetap bisa dipahami tanpa suara.
TL;DR: <video src="..." controls width="..." height="..."> memutar video, <audio src="..." controls> memutar suara. controls memunculkan tombol, dan tanpa itu audio gak kelihatan. poster jadi sampul video, loop mengulang, autoplay memutar otomatis dan butuh muted biar gak diblokir. Teks di dalam tag cuma muncul di browser yang gak kenal tag-nya. Beberapa format file ditulis pakai <source>.
