menambahkan vidio pada HTML

22 May 2025 -

penjelasan tentang bagaimana cara menambahkan vidio pada html

![HTML vidio]

penjelasan tentang bagaimana cara menambahkan vidio pada html

1. Dasar: Tag

• Struktur Umum:

html

controls menampilkan tombol Play, Pause, Volume, dan lainnya.

2. Atribut Penting pada

• Atribut Fungsi controls Menampilkan kontrol video autoplay Memulai video otomatis saat halaman dibuka loop Mengulang video setelah selesai muted Memulai video dalam keadaan tanpa suara poster Menampilkan gambar sebelum video diputar preload Bagaimana browser memuat video (auto, metadata, none)
• Contoh lengkap:

html

3. Menyediakan Beberapa Format Video

Karena tidak semua browser mendukung semua format video, sebaiknya menyediakan alternatif:

html

Format yang sering dipakai: • MP4 (video/mp4) — paling umum • WebM (video/webm) • Ogg (video/ogg)

4. Embed Video dari YouTube, Vimeo, dll.

Kalau mau menyisipkan video dari YouTube (atau platform lain), pakai <iframe>:

html

• Contoh: URL video: https://www.youtube.com/watch?v=dQw4w9WgXcQ Maka link untuk embed: html

Catatan: Untuk Vimeo, tinggal ganti src dengan link embed dari Vimeo.

5. Styling Video (CSS)

Kamu bisa ubah ukuran dan tampilan video dengan CSS:

html

6. Mengontrol Video dengan JavaScript

Kalau mau, kita bisa kendalikan video pakai tombol custom:

html

Play Pause

Ringkasan

• Gunakan
• Gunakan <iframe> untuk video YouTube/Vimeo.
• Tambahkan controls, autoplay, loop, dan poster untuk fitur tambahan.
• Styling video bisa dengan CSS supaya tampil lebih menarik.
• JavaScript bisa dipakai untuk kontrol interaktif.