Atribut pada tag <video> HTML5 digunakan untuk mengontrol perilaku, tampilan, serta sumber media pemutar video di dalam halaman web tanpa memerlukan plugin tambahan seperti Flash. Memahami setiap atribut secara presisi memungkinkan pengembang untuk membangun antarmuka pemutaran media yang responsif, efisien, dan ramah pengguna di berbagai perangkat.
Implementasi dasar tag video memerlukan elemen <source> di dalamnya untuk mendefinisikan format file yang berbeda agar kompatibel dengan berbagai browser. Penggunaan atribut yang tepat secara signifikan memengaruhi performa pemuatan halaman serta pengalaman pengguna saat mengakses konten multimedia.
Tabel Referensi Atribut Tag <video> HTML5
| Atribut | Nilai (Value) | Fungsi Utama |
|---|---|---|
src |
URL | Menentukan jalur file video yang akan dimuat oleh pemutar. |
controls |
controls (Boolean) | Menampilkan kontrol pemutaran standar (play, pause, volume, durasi). |
autoplay |
autoplay (Boolean) | Membuat video langsung diputar otomatis saat halaman selesai dimuat. |
loop |
loop (Boolean) | Mengatur video agar berulang kembali secara otomatis dari awal setelah selesai. |
muted |
muted (Boolean) | Mematikan audio video secara default saat pertama kali dimuat. |
poster |
URL Gambar | Menampilkan gambar placeholder sebelum video diputar atau dimuat. |
preload |
auto | metadata | none | Mengatur seberapa banyak data video yang diunduh sebelum halaman dimuat. |
width |
Pixel (Angka) | Menentukan lebar area pemutar video dalam satuan piksel. |
height |
Pixel (Angka) | Menentukan tinggi area pemutar video dalam satuan piksel. |
playsinline |
playsinline (Boolean) | Mencegah video beralih ke mode layar penuh otomatis di perangkat iOS. |
Contoh Penerapan Kode HTML5 Video
Berikut adalah contoh kode implementasi tag <video> dengan kombinasi beberapa atribut utama serta elemen sumber cadangan untuk memastikan dukungan lintas browser:
<video width="640" height="360" controls poster="poster.jpg" preload="metadata">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Browser Anda tidak mendukung pemutar video HTML5.
</video>Penjelasan Mendalam Atribut Utama
1. Atribut Kontrol dan Tampilan
Atribut controls wajib disertakan jika pengembang ingin pengguna dapat menghentikan, memutar ulang, atau mengatur besar kecilnya suara secara manual. Jika atribut ini dihilangkan, pemutar tidak akan menampilkan tombol interaktif apa pun, yang sering digunakan untuk latar belakang visual dekoratif (biasanya dikombinasikan dengan autoplay dan muted).
Atribut poster krusial untuk estetika halaman. Tanpa poster, browser biasanya akan menampilkan bingkai hitam atau bingkai pertama dari video yang terkadang tampak buram atau tidak profesional.
2. Kebijakan Autoplay dan Mutlaknya Audio
Sebagian besar browser modern menerapkan kebijakan ketat terhadap atribut autoplay. Video dengan atribut autoplay umumnya akan diblokir oleh browser jika tidak disertai dengan atribut muted. Pengguna harus berinteraksi terlebih dahulu dengan halaman web (seperti melakukan klik) sebelum audio dapat dimainkan secara otomatis.
3. Strategi Pengunduhan dengan Preload
Nilai pada atribut preload memberikan instruksi kepada browser mengenai manajemen bandwidth:
- auto: Mengindikasikan bahwa seluruh file video atau sebagian besar data harus diunduh segera meskipun pengguna belum menekan tombol play.
- metadata: Hanya mengunduh informasi dasar durasi, dimensi, dan bingkai awal video untuk menghemat kuota data.
- none: Memberitahu browser untuk sama sekali tidak mengunduh data video sebelum pengguna menekan tombol putar.
Tips Troubleshooting Lapangan
Jika video tidak dapat diputar pada browser tertentu, pastikan tipe MIME server web Anda dikonfigurasi dengan benar untuk ekstensi file .mp4 (video/mp4) dan .webm (video/webm). Selain itu, selalu sediakan minimal dua format sumber video yang berbeda untuk mengantisipasi perbedaan dukungan codec perangkat keras pengguna.