Video dalam HTML

Kita dapat menampilkan video pada suatu webpage dengan menggunakan HTML. Fungsionalitas video ini dapat digunakan menggunakan HTML5 dengan tag <video>.

Menambahkan Video

Menampilkan video dengan HTML menggunakan tag <video>. Untuk menentukan sumber video, dapat dilakukan dengan 2 cara, diantaranya:

dengan menggunakan atribut src pada <video>

<video src="kawah_putih.mp4" controls></video>

atau menggunakan atribut src pada <source>

<video controls>
    <source src="kawah_putih.mp4" type="video/mp4">
</video>

Penjelasan kode:

• <video> : Digunakan untuk membuat media player video.
• Atribut controls : Menyediakan kontrol pada media player seperti play/pause, pengaturan volume, fullscreen, dan lain sebagainya.
• Atribut src : Sumber file video.
• <source src="kawah_putih.mp4" type="video/mp4"> : Digunakan untuk menentukan sumber dari video. Atribut src berisi sumber file video, sedangkan atribut type untuk menentukan tipe dari video.

Output:

Adapun tipe video yang didukung dan dapat digunakan pada atribut "type" dalam elemen source yaitu sebagai berikut:

• MP4 : video/mp4
• WebM : video/webm
• Ogg : video/ogg

Atribut <video>

Tag <video> mempunyai beberapa atribut yang dapat kamu gunakan sesuai dengan kebutuhan kamu, diantaranya yaitu:

• controls : menyediakan kontrol video pada media player.

<video src="video.mp4" controls></video>

• autoplay : memulai video secara otomatis.

<video src="video.mp4" autoplay></video>

Jika autoplay tidak berjalan, maka kemungkinan web browser tersebut hanya support autoplay jika dalam kondisi muted.

<video src="video.mp4" autoplay muted></video>

• width : mengatur ukuran lebar dari video yang ditampilkan.

<video src="video.mp4" width="350"></video>

• height : mengatur ukuran tinggi dari video yang ditampilkan.

<video src="video.mp4" height="350"></video>

• muted : audio pada video secara otomatis akan dibisukan.

<video src="video.mp4" controls muted></video>

• loop : mengulang video terus-menerus.

<video src="video.mp4" controls loop></video>

• poster : memuat gambar sebagai thumbnail video.

<video src="video.mp4" controls poster="image.jpg"></video>

Nilai dari atribut poster merupakan lokasi dari gambar.