cara menambahkan video di html

Daftar Isi:

Prasyarat
Pengenalan Tag Video
Cara Menambahkan Video
Menambahkan Kontrol Video
Menambahkan Otomatis Play

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

Sebelum memulai, ada beberapa hal yang perlu kamu siapkan:

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.

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

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>

Ingat, fitur ini bisa jadi mengganggu pengunjung, jadi gunakan dengan bijak.

Demikianlah cara menambahkan video di HTML. Selamat mencoba!

CARA MENAMBAHKAN VIDEO DI HTML

Panduan sederhana dan mudah dipahami tentang bagaimana menambahkan video di HTML.>