Jika Anda menginginkan di halaman web terdapat pemutaran video maka tag <video>
dapat membantu Anda dengan mudah. Memang benar menggunakan video di halaman web cukup jarang digunakan pada halaman web pada umumnya. Tetapi paling sering digunakan dalam situs media sosial atau berbagi video seperti youtube, vidio, instagram, atau tiktok.
Daftar isi:
Catatan: Pada tutorial audio dan video HTML tidak jauh beda, hanya saja ada 3 atribut tambahan pada tag
<video>
.
Contoh video HTML lengkap
Berikut saya sadurkan dengan contoh yang lengkap:
<video
controls
autoplay
loop
muted
src="https://www.w3schools.com/html/mov_bbb.mp4"
poster="https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg">
</video>
Jenis atribut video
Atribut autoplay
Atribut autoplay akan memutar video pertama kali halaman dimuat, hal ini bisa bermanfaat kalau Anda ingin menggunakannya agar tidak lagi menekan tombol putar.
Atribut controls
Atribut controls untuk kontrol video yang ditampilkan seperti tombol putar, jeda, meredam atau lainnya. Anda wajib menggunakan atribut ini kalau tidak maka kontrol video tidak tampil.
Atribut height
Atribut height akan memberikan tinggi layar video yang bisa disetel secara kustom.
Atribut loop
Jika Anda ingin video berputar terus menerus maka gunakan atribut loop ini.
Atribut muted
Atribut muted akan meredamkan suara video yang diputar baik secara diputar automatis atau manual.
Atribut poster
Atribut poster akan menentukan gambar yang akan ditampilkan saat video sedang diunduh atau sampai pengguna menekan tombol putar.
Atribut scr
Atribut scr menentukan alamat URL berkas video.
Atribut width
Atribut width akan memberikan panjang layar video yang bisa disetel secara kustom.
Sumber:
- Video dan definisi W3Schools
- Poster i.ytimg.com