Video HTML
Elemen HTML <video>
digunakan untuk menampilkan video di halaman web.
Elemen HTML <video>
Untuk menampilkan video dalam HTML, gunakan <video>
elemen:
Contoh
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Bagaimana itu bekerja
Atribut controls
menambahkan kontrol video, seperti putar, jeda, dan volume.
Merupakan ide bagus untuk selalu menyertakan width
dan height
atribut. Jika tinggi dan lebar tidak disetel, halaman mungkin berkedip saat video dimuat.
Elemen ini <source>
memungkinkan Anda untuk menentukan file video alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format pertama yang dikenali.
Teks antara <video>
dan </video>
tag hanya akan ditampilkan di browser yang tidak mendukung <video>
elemen tersebut.
HTML <video> Putar Otomatis
Untuk memulai video secara otomatis, gunakan autoplay
atribut:
Contoh
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Catatan: Browser Chromium tidak mengizinkan putar otomatis dalam banyak kasus. Namun, putar otomatis tanpa suara selalu diizinkan.
Tambahkan muted
setelah
autoplay
agar video Anda mulai diputar secara otomatis (tetapi dibisukan):
Contoh
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung
<video>
elemen tersebut.
Element | |||||
---|---|---|---|---|---|
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Format Video HTML
Ada tiga format video yang didukung: MP4, WebM, dan Ogg. Dukungan browser untuk format yang berbeda adalah:
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Edge | YES | YES | YES |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
Video HTML - Jenis Media
File Format | Media Type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
Video HTML - Metode, Properti, dan Acara
DOM HTML mendefinisikan metode, properti, dan kejadian untuk <video>
elemen.
Ini memungkinkan Anda memuat, memutar, dan menjeda video, serta mengatur durasi dan volume.
Ada juga acara DOM yang dapat memberi tahu Anda saat video mulai diputar, dijeda, dll.
Untuk referensi DOM lengkap, buka Referensi DOM Audio/Video HTML kami .
Tag Video HTML
Tag | Description |
---|---|
<video> | Defines a video or movie |
<source> | Defines multiple media resources for media elements, such as <video> and <audio> |
<track> | Defines text tracks in media players |