Video memadukan gambar bergerak dan suara dalam satu elemen, dan browser modern merendernya tanpa plugin. Elemen video mewarisi banyak kebiasaan audio — controls, loop, preload, dan elemen source — lalu menambahkan dimensi baru: lebar, tinggi, gambar sampul, dan kebijakan autoplay. Pada Chapter ini kita menulis video lengkap dengan poster, memahami mengapa autoplay selalu berpasangan dengan muted, dan melihat kapan file video langsung lebih tepat daripada sematan platform streaming.

Elemen video dan Atribut Dasar #

Elemen video mengambil file melalui atribut src atau sumber source, sama seperti audio. Atribut controls menampilkan player bawaan, sedangkan width dan height menetapkan lebar serta tinggi area pemutar dalam piksel. Memberi width dan height sejak awal juga melindungi layout dari pergeseran — pola yang sama dengan img pada Chapter Menampilkan Gambar.

html 
<video src="sambal.mp4" controls width="640" height="360"></video>

Output yang Dihasilkan:

text 
Browser menampilkan area pemutar 640x360 dengan player bawaan;
ruangnya tersiap sejak awal sehingga konten di bawahnya tidak bergeser.

Poster: Gambar Sampul Video #

Sebelum pengunjung menekan tombol putar, area video menampilkan bingkai pertama file — kadang berupa layar gelap yang kurang menarik. Atribut poster mengambil alih momen tersebut dengan alamat gambar sampul: poster tampil sampai pemutaran dimulai. Pilih gambar yang mewakili isi video, misalnya foto hasil masakan untuk video resep.

html 
<video src="sambal.mp4" controls width="640" height="360" poster="sampul-sambal.jpg"></video>

Output yang Dihasilkan:

text 
Area pemutar menampilkan gambar sampul-sambal.jpg sejak halaman dibuka;
layar gelap bingkai pertama baru terlihat setelah tombol putar ditekan.

Autoplay Berpasangan dengan muted #

Atribut autoplay memerintahkan browser memutar video segera setelah data mencukupi. Namun browser memblokir autoplay yang bersuara: pengunjung dianggap tidak ingin halaman yang tiba-tiba berbunyi. Kebijakan resminya bersifat sederhana — media bersuara diblokir, media tanpa suara diperbolehkan. Media dianggap tanpa suara bila file tidak memuat trek audio atau bila atribut muted menyertainya.

html 
<video src="latar-pantai.mp4" autoplay muted loop playsinline></video>

Atribut playsinline meminta pemutaran tetap berlangsung di dalam area elemen, bukan layar penuh otomatis seperti pada sebagian browser ponsel. Kombinasi autoplay muted playsinline inilah pola standar untuk video latar dan hero video. Untuk video utama yang memang bersuara, serahkan tombol putar kepada pengunjung lewat controls.

Loop dan Preload #

Atribut loop mengulang pemutaran dari awal setiap kali selesai, dan preload memberi petunjuk pengunduhan awal dengan nilai none, metadata, atau auto — perilaku lengkapnya kita bedah pada chapter Audio. Untuk video dengan poster, nilai preload="none" hemat kuota karena hanya gambar sampul yang dimuat di awal.

File Video vs Platform Streaming #

Elemen video memutar file langsung: mp4 dan webm adalah dua format yang paling sering dipakai. Pola lain adalah menyematkan video dari platform streaming seperti YouTube atau Vimeo, yang disisipkan lewat elemen iframe. Sematan platform menangani kualitas otomatis dan beban server, tetapi tampilan dan perilakunya berada di luar kendali HTML kita; pembahasan iframe tersaji pada section Embedded Content. Untuk latihan course ini, file langsung lebih tepat karena semua atributnya dapat kita uji sendiri.

Contoh Lengkap dalam Satu File #

File berikut merangkum video lengkap: controls, ukuran, poster, dua sumber format, dan teks pengganti. File videonya hipotetis; pembaca perlu menyediakan sambal.mp4 dan sambal.webm sendiri, sedangkan poster dapat berupa gambar apa pun:

html contoh-video.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Elemen Video</title>
</head>
<body>
  <h1>Video resep sambal warung Siti</h1>
  <video controls width="640" height="360" poster="sampul-sambal.jpg" preload="metadata">
    <source src="sambal.webm" type="video/webm">
    <source src="sambal.mp4" type="video/mp4">
    Browser ini tidak mendukung pemutaran video. Unduh videonya
    <a href="sambal.mp4">di sini</a>.
  </video>
  <p>Durasi singkat, cocok ditonton sebelum memasak.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Video resep sambal warung Siti"
  - Area pemutar 640x360 dengan gambar sampul sampul-sambal.jpg
  - Player bawaan: tombol putar, garis waktu, dan volume
  - File webm dimuat bila didukung; bila tidak, mp4 yang dipakai
  - Paragraf penutup di bawah area pemutar

Mari kita telaah baris-baris penting pada file di atas:

  1. Baris 10 (video pembuka): controls menampilkan player, width dan height menetapkan ukuran area, poster menampilkan gambar sampul, dan preload="metadata" membatasi unduhan awal pada data durasi.
  2. Baris 11 (source webm): kandidat pertama; webm umumnya lebih ringan dan didukung semua browser modern.
  3. Baris 12 (source mp4): kandidat cadangan yang diambil bila webm tidak didukung.
  4. Baris 13-14 (teks pengganti): tampil pada browser yang tidak mengenal elemen video, berisi link unduhan file.
  5. Tidak ada autoplay: video resep bersuara, sehingga keputusan memutar dibiarkan pada pengunjung.

Video kini tampil dengan sampul yang menarik dan sumber cadangan yang siap. Satu bagian penting masih kurang bagi banyak pengunjung: teks pita bagi yang menonton tanpa suara, dan itulah topik Chapter berikutnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-video.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Elemen Video</title>
</head>
<body>
  <h1>Video resep sambal warung Siti</h1>
  <video controls width="640" height="360" poster="sampul-sambal.jpg" preload="metadata">
    <source src="sambal.webm" type="video/webm">
    <source src="sambal.mp4" type="video/mp4">
    Browser ini tidak mendukung pemutaran video. Unduh videonya
    <a href="sambal.mp4">di sini</a>.
  </video>
  <p>Durasi singkat, cocok ditonton sebelum memasak.</p>
</body>
</html>