Video HTML


Elemen HTML <video>digunakan untuk menampilkan video di halaman web.


Contoh

Courtesy of Big Buck Bunny :


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 controlsmenambahkan kontrol video, seperti putar, jeda, dan volume.

Merupakan ide bagus untuk selalu menyertakan widthdan heightatribut. 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 autoplayatribut:

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 mutedsetelah autoplayagar 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.

Contoh: Menggunakan JavaScript




Video milik Big Buck Bunny .

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