Pemutar video kini menjadi salah satu elemen penting dalam sebuah situs web. Dengan HTML5, Anda tidak perlu lagi menggunakan plugin pihak ketiga seperti Adobe Flash untuk menampilkan video. HTML5 menyediakan tag <video> yang memungkinkan Anda menyematkan video langsung ke halaman web dengan mudah, bahkan mendukung pemutaran di berbagai perangkat, termasuk smartphone dan tablet.
Artikel ini akan memandu Anda membuat pemutar video dasar menggunakan tag <video> di HTML5.
Langkah 1: Struktur Dasar HTML
Pertama, siapkan struktur HTML5 dasar Anda. Anda akan menggunakan tag <video> untuk menampung video yang ingin Anda tampilkan.
Berikut adalah kode dasar yang bisa Anda gunakan:
<!DOCTYPE html>
<html>
<head>
<title>Pemutar Video HTML5</title>
</head>
<body>
<h1>Pemutar Video</h1>
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Browser Anda tidak mendukung tag video.
</video>
</body>
</html>
Langkah 2: Memahami Atribut Tag <video>
Tag <video> memiliki beberapa atribut penting yang mengatur cara video ditampilkan dan diputar.
widthdanheight: Atribut ini menentukan lebar dan tinggi pemutar video. Menggunakan ukuran dalam piksel adalah praktik yang umum.controls: Atribut ini sangat penting. Ketika Anda menyertakancontrols, browser akan menampilkan kontrol pemutaran standar seperti tombol play/pause, pengatur volume, dan timeline video.autoplay: Jika Anda ingin video mulai diputar secara otomatis saat halaman dimuat, tambahkan atribut ini.loop: Jika Anda ingin video berulang (loop) setelah selesai diputar, gunakan atribut ini.muted: Atribut ini akan membuat video diputar tanpa suara. Ini sering digunakan bersama denganautoplaykarena banyak browser memblokir video yang diputar otomatis dengan suara.poster: Atribut ini memungkinkan Anda menampilkan gambar thumbnail atau poster video sebelum video mulai diputar. Contoh:<video poster="poster_video.jpg">
Langkah 3: Menggunakan <source> untuk Kompatibilitas
Tidak semua browser mendukung format video yang sama. Untuk memastikan video Anda dapat diputar di semua browser utama, Anda harus menyediakan video dalam beberapa format berbeda. Tag <source> sangat berguna untuk tujuan ini.
Pada contoh kode di atas, Anda melihat tiga tag <source> yang menunjuk ke tiga format file berbeda: .mp4, .ogg, dan .webm.
.mp4: Didukung secara luas oleh sebagian besar browser, termasuk Chrome, Safari, dan Edge..ogg: Format terbuka yang didukung oleh Mozilla Firefox dan Opera..webm: Format terbuka lain yang didukung oleh Google Chrome, Mozilla Firefox, dan Opera.
Ketika browser memuat halaman, ia akan memeriksa tag <source> secara berurutan dan akan memutar file pertama yang didukungnya. Jika tidak ada tag <source> yang didukung, teks di antara tag <video> akan ditampilkan (“Browser Anda tidak mendukung tag video.”). Ini adalah pesan cadangan yang baik untuk pengguna.
Tips Tambahan
- Responsif: Untuk membuat pemutar video Anda responsif (menyesuaikan dengan ukuran layar), hapus atribut
widthdanheight, lalu tambahkan CSS berikut:CSSvideo { width: 100%; height: auto; } - Menggunakan JavaScript: Anda bisa mengontrol pemutar video lebih lanjut dengan JavaScript. Misalnya, Anda bisa membuat tombol play atau pause kustom dengan memanipulasi properti
play()ataupause()dari elemen video.
Dengan tag <video> HTML5, menyematkan video di situs web Anda menjadi proses yang sederhana dan efisien, memberikan pengalaman yang lebih baik bagi pengguna tanpa ketergantungan pada plugin eksternal.
