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:

• Contoh video HTML lengkap
• Jenis atribut video
  • Atribut autoplay
  • Atribut controls
  • Atribut height
  • Atribut loop
  • Atribut muted
  • Atribut poster
  • Atribut scr
  • Atribut width

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