DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Untuk menambahkan video ke dalam halaman web, kamu tidak perlu menjadi seorang ahli dalam coding. Bahkan, HTML menyediakan tag khusus yang memungkinkan kamu untuk melakukannya dengan mudah. Dalam artikel ini, kita akan membahas cara menambahkan video di HTML.
Sebelum memulai, ada beberapa hal yang perlu kamu siapkan:
HTML 5 memperkenalkan tag <video>
yang dapat digunakan untuk embed video ke dalam halaman HTML. Tag ini sangat fleksibel dan mendukung berbagai format video, termasuk MP4, WebM, dan Ogg.
Contoh penggunaannya adalah:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Teks ini akan muncul jika browser tidak mendukung tag video.
</video>
Berikut adalah langkah-langkah untuk menambahkan video ke halaman HTML:
Buka editor teks kamu dan buat struktur dasar HTML jika belum ada. Kemudian, tambahkan tag <video>
ke bagian yang kamau ingin letakkan videonya.
<!DOCTYPE html>
<html>
<head>
<title>Halaman Video</title>
</head>
<body>
<video width="320" height="240" controls>
</video>
</body>
</html>
Selanjutnya, tambahkan tag <source>
di dalam tag <video>
. Tag ini digunakan untuk menunjukkan lokasi dan jenis file video.
Misalnya, jika kamu memiliki file video bernama “videoKu.mp4” di folder yang sama dengan file HTML, maka isi tag <source>
akan menjadi seperti ini:
<source src="videoKu.mp4" type="video/mp4">
Pesan ini akan ditampilkan jika browser yang digunakan pengunjung tidak mendukung tag video. Tambahkan teks ini langsung setelah tag <source>
.
Teks ini akan muncul jika browser tidak mendukung tag video.
Simpan file HTML tersebut dan buka dengan browser. Jika semua langkah diikuti dengan benar, video harus sudah bisa muncul di halaman web.
Atribut controls
pada tag <video>
digunakan untuk menunjukkan kontrol video seperti play, pause, volume, dll. Jika kamu ingin menyembunyikannya, cukup hapus atribut ini.
Jika kamu menginginkan videonya langsung diputar saat halaman dibuka, tambahkan atribut autoplay
ke tag <video>
. Contohnya seperti ini:
<video width="320" height="240" controls autoplay>
<source src="videoKu.mp4" type="video/mp4">
Teks ini akan muncul jika browser tidak mendukung tag video.
</video>
Ingat, fitur ini bisa jadi mengganggu pengunjung, jadi gunakan dengan bijak.
Demikianlah cara menambahkan video di HTML. Selamat mencoba!
Link terkait: