Menambahkan Video di HTML

03 May 2025 -

Berikut adalah materi lengkap tentang Menambahkan Vidio di HTML :

🎬 Menambahkan Video di HTML

Menambahkan video ke dalam website HTML dapat meningkatkan interaktivitas dan daya tarik pengguna. Dengan adanya HTML5, kini kamu dapat menyematkan video langsung ke halaman web tanpa plugin tambahan.

Artikel ini akan membahas cara menggunakan tag <video>, atribut penting, dan praktik terbaik dalam menyisipkan video.

📌 Prasyarat

Sebelum mulai, pastikan kamu sudah memiliki:

1. File video yang ingin ditampilkan

2. Hak atau izin untuk menggunakan video tersebut

3. Editor teks seperti VS Code, Sublime Text, atau Notepad++

🔍 Pengenalan Tag `<video>`

HTML5 memperkenalkan tag <video> untuk menyematkan video langsung ke dalam halaman web.

Format yang umum digunakan:

- WebM

- Ogg

Keuntungan:

- Tidak butuh plugin tambahan

- Kompatibel di banyak browser modern

🧱 Struktur Dasar Tag `<video>`

Berikut adalah contoh struktur dasar untuk menambahkan video:

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

📌 Penjelasan:

* width & height: menentukan ukuran player

* `controls`: menampilkan tombol kontrol (play, pause, volume)

* `source`: untuk menyisipkan file video

* Pesan alternatif ditampilkan jika browser tidak mendukung video

⚙️ Atribut Penting `<video>`

Berikut beberapa atribut yang bisa digunakan untuk mengatur perilaku video:

* `controls`: Menampilkan kontrol video

* `autoplay`: Memutar otomatis saat halaman dimuat

* `loop`: Memutar ulang setelah selesai

* `muted`: Memulai dalam keadaan tanpa suara

Contoh Lengkap:

<video width="640" height="360" controls autoplay loop muted>
  <source src="/assets/vidio/mov_bbb.mp4" type="video/mp4">
  Browser Anda tidak mendukung elemen video.
</video>

> ⚠️ Catatan: Autoplay hanya bekerja jika video dalam keadaan muted.

🧪 Langkah-Langkah Menambahkan Video

1. Siapkan Struktur HTML

Buat file HTML dan tambahkan tag <video> di bagian yang diinginkan.

<video width="640" height="360" controls>

2. Tambahkan Sumber Video

Gunakan tag <source> untuk menentukan lokasi dan jenis file video:

<source src="/assets/vidio/mov_bbb.mp4" type="video/mp4">
<source src="/assets/vidio/mov_bbb.webm" type="video/webm">

3. Tambahkan Pesan Alternatif

Pesan ini akan muncul jika browser tidak mendukung tag <video>:

Browser Anda tidak mendukung elemen video.

4. Simpan dan Jalankan

Simpan file HTML dan buka di browser. Video seharusnya sudah tampil dan bisa dijalankan.

🧾 Format File yang Didukung

Beberapa format video yang didukung oleh browser:

* ✅ **MP4**: Paling umum dan kompatibel

* ✅ **WebM**: Ukuran kecil, ideal untuk performa

* ✅ **Ogg**: Alternatif tambahan

Contoh:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Browser Anda tidak mendukung pemutar video.
</video>

✅ Kesimpulan

Dengan HTML5, kamu bisa menyematkan video dengan mudah dan fleksibel. Gunakan tag <video> dengan atribut dan format yang sesuai agar kontenmu tampil menarik dan kompatibel di berbagai perangkat.