Sebelum HTML5, tidak ada standar untuk menampilkan video di halaman web. Sementara itu, video hanya bisa dimainkan dengan plug-in (seperti flash).
Elemen <video> HTML5 kini dapat menentukan cara standar untuk menyematkan video di halaman web.
1. Dukungan Browser
Berikut ini merupakan versi browser yang mendukung elemen <video> HTML5.
2. Bagaimana Cara Kerjanya
Atribut control memungkinkan video dapat dikendalikan, seperti play, pause, dan volume.
Jika tinggi dan lebar tidak diatur, browser tidak bisa mengetahui size video, sehingga dapat menimbulkan efek saat video di load.
Beberapa elemen <source> dapat berupa link menuju ke file video yang berbeda. Browser akan menggunakan inisialisasi format file yang pertama kali.
3. Format Video HTML5
Saat ini, ada 3 format video yang didukung oleh elemen <video> seperti; MP4, WebM, dan Ogg.
| Browser | MP4 | WebM | Ogg |
|-------------------|---------------------|------|-----|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
| Browser | MP4 | WebM | Ogg |
| Internet Explorer | YES | NO | NO |
4. HTML Video - Tipe Media
| File Format | Media Type |
|-------------|------------|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
5. HTML Video - Methods, Properties, dan Events
HTML5 mendefinisikan metode DOM, properti, dan even untuk elemen <video> . Hal ini memungkinkan Anda untuk meload, play, dan pause video, serta pengaturan durasi dan volume.
Ada juga DOM even yang dapat memberitahu Anda ketika video mulai dijalankan, dijeda, dll.
Referensi DOM selengkapnya, silakan berkunjung ke sini HTML5 Audio/Video DOM Reference
6. HTML5 Video - Tags
| 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 |
Contoh Project
<!DOCTYPE HTML>
<html>
<!-- bundet.com -->
<head>
<title> The video element</title>
</head>
<center>
<body>
<h1>Memutar Video</h1>
<video width="850" height="450" controls poster="video/cover.jpg" preload="metadata">
<source src="video/chrome.mp4" type="video/mp4"/>
<P>This browser does not support the video element.</P>
</video>
</body></center>
</html>
Hasilnya:
https://youtu.be/yHoVkb8eDIY
