Deskripsi
Penjelasan HTML video

HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.

Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan source (sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung).

Didalam element <video> dapat ditulis konten (teks), untuk browser lawas yang tidak mendukung HTML5 video. Teks ini, akan tampil sebagai ganti dari video yang tidak dapat diputar.

HTML <video> merupakan tag yang baru diperkenalkan pada HTML5.


Video Formats
Beberapa format video yang didukung oleh HTML <video> element.

Format Penjelasan Extensi File MIME Types
MP4 File MPEG 4, dengan video codec H264, dan audio codec AAC. .mp4 video/mp4
Ogg Theora File Ogg, dengan video codec Theora dan audio codec Vorbis. .ogm / .ogv / .ogg video/ogg
WebM File WebM dengan video codec VP8 dan audio codec Vorbis. .webm video/webm

Adapun untuk dukungan format video setiap browser berbeda-beda.

Browser MP4 Ogg WebM
 Chrome
 Firefox
 Internet Explorer .
 Safari
 Opera

Attributes
Atribut HTML Tag <video>

autoplay

Menginstruksikan browser untuk mulai memutar video secara otomatis sesegera mungkin tanpa berhenti.

controls

Menginstruksikan browser untuk menampilkan antarmuka (user interface) untuk video control (seperti menampilkan tombol putar (play), kontrol volume dan lain sebagainya).

height

Menentukan (ukuran) tinggi pemutar video (video player).

loop

Menginstruksikan browser untuk memutar ulang video ketika selesai (mencapai waktu akhir putar).

muted

Menginstruksikan browser untuk membisukan (tanpa suara) video.

poster

Menentukkan URL yang merujuk sebuah gambar yang akan dijadikan poster frame yang akan tampil sebelum video diputar (mengklik tombol "play").

preload

Menginstruksikan browser untuk menentukkan jika dan bagaimana penulis memuat video ketika halaman web dimuat (termasuk mengunduh (download) video dan metadata-nya) demi pengalaman menjelajah yang baik untuk user.

src

Menentukkan URL yang mengarah pada sumber video file berada (disimpan).

width

Menentukkan (ukuran) lebar pemutar video (video player).


Global Attributes
Atribut Secara Global (Keseluruhan)

<video> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<video> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <video> element

Contoh 1:

HTML video element sederhana.

<video src="http://dul.web.id/editor/media/video/video.mp4" controls>
</video>
Contoh 2:

HTML video element yang merujuk format video lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.

<video width="400" controls preload="metadata">
  <source src="http://dul.web.id/editor/media/video/video.mp4" type="video/mp4"/>
  <source src="http://dul.web.id/editor/media/video/video.webm" type="video/webm"/>
  <source src="http://dul.web.id/editor/media/video/video.ogv" type="video/ogg"/>
</video>

Dibawah ini, contoh berikut editor untuk belajar HTML video dengan track dan .vtt file yang dapat digunakan untuk menulis caption atau judul video, dapat pula digunakan untuk menulis subtitle yang sering kita lihat pada video karaoke.

Untuk lebih jelasnya, silahkan pelajari juga mengenai HTML <track> element.

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <video>
Code Editor

Harap diperhatikan: Untuk contoh diatas, apabila subtitle tidak terlihat di dalam video, kemungkinan browser Anda tidak mendukung HTML <track> element. Gunakan browser (Google Chrome) terbaru untuk mencobanya.