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.
Prasyarat
- Video yang ingin ditambahkan. Pastikan kamu memiliki hak untuk menyebarkan video tersebut.
- Editor teks, seperti Notepad atau lebih baik lagi, editor teks khusus untuk coding seperti Sublime Text, Visual Studio Code, Notepad++, dll.
Sebelum memulai, ada beberapa hal yang perlu kamu siapkan:
Pengenalan Tag Video
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>Cara Menambahkan Video
Berikut adalah langkah-langkah untuk menambahkan video ke halaman HTML:
1. Siapkan Tag Video
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>2. Tambahkan Source Video
<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>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">3. Tambahkan Pesan Alternatif
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.4. Cek Hasilnya
Simpan file HTML tersebut dan buka dengan browser. Jika semua langkah diikuti dengan benar, video harus sudah bisa muncul di halaman web.
Menambahkan Kontrol Video
Atribut controls pada tag <video> digunakan untuk menunjukkan kontrol video seperti play, pause, volume, dll. Jika kamu ingin menyembunyikannya, cukup hapus atribut ini.
Menambahkan Otomatis Play
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>Demikianlah cara menambahkan video di HTML. Selamat mencoba!
.jpeg)
Tidak ada komentar:
Posting Komentar