Free INDONESIA Cursors at www.totallyfreecursors.com

Selasa, 27 Agustus 2024

PRAKTIK PEMBUATAN HALAMAN WEB DENGAN NOTEPAD KELAS 96

 





Memuat VIDEO PADA FILE HTML

 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

  1. Video yang ingin ditambahkan. Pastikan kamu memiliki hak untuk menyebarkan video tersebut.
  1. 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!

Featured Post

SIMULASI OSN 2025

OSN SMP 2025 OSN (Olimpiade Sains Nasional) adalah  ajang kompetisi sains bagi siswa SD, SMP, dan SMA di seluruh Indonesia yang diselenggara...

DATA SISWA