Di era digital ini, konten video menjadi salah satu media yang paling efektif untuk menarik perhatian pengunjung situs web. Dulu, untuk memutar video, kita harus bergantung pada plugin pihak ketiga seperti Adobe Flash Player. Namun, sejak HTML5, semua itu berubah. HTML menyediakan cara yang mudah dan standar untuk menyematkan video langsung ke dalam halaman web menggunakan tag <video>.

Dengan tag <video>, Anda dapat menampilkan video tanpa perlu instalasi tambahan, membuat situs web Anda lebih ringan dan kompatibel di berbagai perangkat, termasuk ponsel dan tablet.

Cara Sederhana Memasang Video

Untuk menyematkan video, Anda hanya perlu tag <video> yang berisi jalur ke file video Anda.

Contoh Dasar:

<video src="video-anda.mp4" width="640" height="360" controls></video>

Mari kita bedah setiap bagian dari kode di atas:

• <video>: Tag pembuka untuk pemutar video.
• src="video-anda.mp4": Atribut ini menentukan lokasi (source) dari file video Anda. Pastikan nama file dan jalurnya sudah benar.
• width="640" height="360": Atribut ini mengatur ukuran pemutar video dalam piksel. Menentukan ukuran sangat disarankan agar tata letak halaman tidak berantakan saat video dimuat.
• controls: Atribut ini adalah yang paling penting! Atribut ini akan menampilkan kontrol standar pemutar video, seperti tombol play/pause, volume, dan seek bar. Tanpa atribut ini, video tidak akan bisa dikontrol oleh pengguna.

Opsi Lain untuk Kompatibilitas Lebih Baik

Tidak semua browser mendukung semua format video (misalnya, beberapa browser tidak mendukung .mov). Untuk memastikan video Anda bisa diputar di sebanyak mungkin browser, Anda bisa menyediakan beberapa format video yang berbeda menggunakan tag <source>.

Contoh dengan Multiple Source:

<video width="640" height="360" controls>
  <source src="video-anda.mp4" type="video/mp4">
  <source src="video-anda.webm" type="video/webm">
  <p>Browser Anda tidak mendukung tag video.</p>
</video>

Pada contoh di atas, browser akan mencoba memuat file <source> pertama. Jika tidak berhasil, ia akan mencoba yang berikutnya. Teks di dalam tag <video> (seperti <p>Browser Anda tidak mendukung...) akan ditampilkan jika tidak ada format video yang didukung oleh browser.

Atribut Penting Lainnya

Selain src dan controls, ada beberapa atribut lain yang bisa Anda gunakan untuk menyesuaikan perilaku pemutar video:

• autoplay: Memutar video secara otomatis saat halaman dimuat. Biasanya, browser modern memerlukan interaksi pengguna sebelum video bisa otomatis diputar.
• loop: Memutar ulang video secara terus-menerus setelah selesai.
• muted: Memulai video dalam keadaan suara dimatikan (mute). Atribut ini sering digunakan bersamaan dengan autoplay untuk menghindari pengalaman buruk bagi pengguna.
• poster="gambar-poster.jpg": Menampilkan gambar pratinjau (thumbnail) sebelum video dimuat atau diputar. Ini sangat berguna untuk memberikan gambaran isi video kepada pengguna.

Kesimpulan

Tag <video> adalah cara yang efisien dan standar untuk menyematkan video di situs web Anda. Dengan beberapa baris kode, Anda dapat membuat pengalaman menonton yang responsif dan kompatibel di berbagai platform. Menguasai tag ini akan membuka banyak kemungkinan kreatif untuk konten visual Anda.