HTML element tag <video> merupakan tag pada HTML yang digunakan untuk menyisipkan data dalam bentuk video ke dalam suatu halaman HTML. HTML element tag <video> akan memainkan file video dalam bentuk gambar bergerak yang dilengkapi dengan suara pada halaman HTML secara langsung. Element tag ini akan menghasilkan tampilan berupa video player yang dilengkapi dengan berbagai control video seperti tombol play, pause, stop, duration, tracking bar, volume dan lainnya.
Setiap browser memiliki tampilan pemutar video yang berbeda. File video seperti MP4, OGG, dan WEBM dapat dijalankan pada hampir semua browser tanpa harus menginstall plugin eksternal.
HTML element tag <video> dalam memutar file video dilakukan dengan perujukkan melalui atribut SRC. Atribut tersebut merupakan sumber (source) yang berisi URL di mana file video tersebut berada.
Untuk menghindari kegagalan pada pemutaran file video pada halaman HTML dilakukan dengan cara menyertakan beberapa format file video sekaligus. HTML element tag <source> dapat diletakkan di dalam element tag <video> dan dilengkapi dengan atribut SRC sebagai lokasi file video berada. Browser akan memutar file video yang pertama sebagai nilai default. Jika file video tersebut gagal diputar akan memutar video yang kedua sebagai pilihan kedua, dan seterusnya.
Penggunaan Element Tag <video>
Penyertaan file video agar video tersebut dapat dijalankan pada browser dilakukan dengan menuliskan file video di dalam atribut SRC. File video diletakkan sejajar dengan halaman HTML atau dengan melakukan perujukkan langsung via URL.
Di dalam HTML element tag <video> dapat berisi element tag lain seperti P (Paragraf), DIV dan SPAN. Element tag tersebut berguna sebagai informasi bagi pengguna jika browser gagal memutar file video.
HTML
1
2
3
<video width="640" src="glass_water.mp4" controls>
<p>Maaf.. Brower tidak mendukung native video player</p>
</video>
Jika dijalankan akan menghasilkan tampilan :
Atribut Khusus
HTML element tag <video> memiliki atribut yang digunakan untuk menata pemutar file video. Atribut khusus pada element tag <video> meliputi :
Berikut contoh penggunaan elemen tag <video> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag VIDEO</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag VIDEO</h1>
<video width="440" controls>
<source src="glass_water.webm" type="video/webm"/>
<source src="glass_water.ogv" type="video/ogg"/>
<source src="glass_water.mp4" type="video/mp4"/>
<p>Maaf.. Brower tidak mendukung native video player</p>
</video>
</body>
</html>
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <video> | 4.0 | 9.0 | 3.5 | 3.1 | 11.4 |
Global Attributes :
Tag <video> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <video> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <video> pada HTML :
CSS
1
/* Tidak ada */
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
