Elemen <video> pada HTML berfungsi untuk menampilkan video pada halaman web.
Contoh :
<!DOCTYPE html> <html> <body> <video width="400" controls> <source src="funnyrabbit.mp4" type="video/mp4"> <source src="funnyrabbit.ogg" type="video/ogg"> Browser anda tidak mendukung video </video> <p> Sumber video dari <a href="https://www.youtube.com/watch?v=lTTajzrSkCw" target="_blank">Funny rubbit's 10 sec video</a>. </p> </body> </html>
Section Artikel
Elemen <video> pada HTML
Untuk menampilkan sebuah video pada kode HTML, maka gunakan elemen <video>.
Contoh :
<!DOCTYPE html> <html> <body> <video width="400" height="340" controls> <source src="countdown.mp4" type="video/mp4"> <source src="countdown.ogg" type="video/ogg"> Browser anda tidak mendukung video </video> </body> </html>
Bagaimana cara kerjanya?
Atribut control berfungsi untuk menambahkan kontrol pada video seperti putar, jeda, dan volume.
Sebaiknya selalu menyertakan atribut lebar (width) dan tinggi (height). Jika tinggi dan lebar tidak diatur, halaman mungkin berkedip saat video dimuat.
Elemen <source> memungkinkan untuk menentukan file video alternatif yang dapat dipilih browser. Browser akan menggunakan format pertama yang dikenali.
Teks yang terdapat diantara tag <video> dan </video> hanya akan ditampilkan jika browser yang digunakan tidak mendukung elemen <video>.
Autoplay elemen <video>
Untuk membuat video memulai atau memutar secara otomatis, gunakan atribut autoplay pada HTML.
Contoh :
<!DOCTYPE html> <html> <body> <video width="400" height="340" autoplay> <source src="countdown.mp4" type="video/mp4"> <source src="countdown.ogg" type="video/ogg"> Browser anda tidak mendukung video </video> <p><b>Catatan:</b> Atribut autoplay tidak berfungsi di beberapa perangkat seluler.</p> </body> </html>
Atribut autoplay tidak berfungsi di perangkat seluler seperti iPad dan iPhone.
Browser yang mendukung <video>
Angka dalam tabel menunjukan versi browser pertama yang sepenuhnya mendukung elemen <video>.
| Element | Chrome | Edge | Firefox | Safari | Opera |
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Format Video HTML
Ada tiga format video yang didukung pada HTML yaitu MP4, WebM, dan Ogg. Browser yang mendukung berbagai format adalah:
| Browser | MP4 | WebM | Ogg |
| Edge | YA | YA | YA |
| Chrome | YA | YA | YA |
| Firefox | YA | YA | YA |
| Safari | YA | YA | TIDAK |
| Opera | YA | YA | YA |
Tipe Media- video HTML
| Format File | Tipe Media |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Video HTML – Method, Properti, dan Event
HTML DOM mendefinisikan method, properti, dan event untuk elemen <video>.
HTML DOM memungkinkan untuk memuat, memutar, dan menjeda video, serta mengatur durasi dan volumenya.
Ada juga event DOM yang dapat memberi tahu saat video mulai diputar, dijeda, dll.
Contoh : Menggunakan JavaScript
<!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Perbesar</button> <button onclick="makeSmall()">Perkecil</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="funnyrabbit.mp4" type="video/mp4"> <source src="funnyrabbit.ogg" type="video/ogg"> Browser anda tidak mendukung video. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> <p>Sumber video dari <a href="https://www.youtube.com/watch?v=lTTajzrSkCw" target="_blank">Funny rubbit's 10 sec video</a>.</p> </body> </html>
Tag Video HTML
| Tag | Deskripsi |
| <video> | Mendefinisikan video atau film |
| <source> | Mendefinisikan beberapa sumber daya media untuk elemen media, seperti <video> dan <audio> |
| <track> | Mendefinisikan track teks di pemutar media |
