Tag video HTML: panduan lengkap dengan contoh

Poin penting

• Gunakan <video> dengan sumber MP4 (H.264/AAC); tambahkan WebM lebih dulu jika Anda ingin file lebih kecil.

• Tambahkan controls, poster, dan preload="metadata" — autoplay hanya saat tanpa suara dan inline.

• Sisihkan ruang dengan aspect-ratio dan gunakan object-fit agar pas di tata letak apa pun.

• Tambahkan teks dengan <track> untuk aksesibilitas.

• Untuk YouTube atau Vimeo, gunakan pemutar iframe mereka; untuk banyak video, gunakan galeri.

Contoh dasar

<video controls width="640" poster="poster.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Atribut

Video responsif

video{width:100%;height:auto;aspect-ratio:16/9}

Teks (caption)

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>

Meng-embed YouTube bukan dengan tag video

Video YouTube dan Vimeo tidak bisa diputar dengan <video>; gunakan pemutar iframe mereka — lihat generator kode embed YouTube kami.

Cara tanpa kode

Butuh galeri video YouTube, Vimeo, dan video yang di-host, bukan satu pemutar? Gunakan widget.

Coba Elfsight Video Gallery

Format dan dukungan browser

Kontrol video dengan JavaScript

const v = document.querySelector("video");
v.play();            // returns a Promise
v.pause();
v.currentTime = 30;  // seek to 0:30
v.muted = true;
v.addEventListener("ended", () => console.log("done"));
v.addEventListener("timeupdate", () => console.log(v.currentTime));

Tangani Promise dari play() — Promise akan ditolak saat browser memblokir pemutaran.

Lazy loading dan performa

• preload="none" atau "metadata" menjaga halaman awal tetap ringan.

• Gambar poster tampil seketika.

• Gunakan loading="lazy" pada iframe; untuk <video>, atur src saat video digulir ke area pandang.

• Sisihkan ruang dengan aspect-ratio untuk menghindari layout shift.

Daftar periksa aksesibilitas

• Tambahkan teks dengan <track kind="captions">.

• Pertahankan controls kecuali Anda menyediakan kontrol aksesibel sendiri.

• Jangan pernah autoplay dengan suara.

• Sediakan transkrip untuk video penting.

Masalah umum

1. 1.

   Video tidak diputar di iPhone

   Tambahkan playsinline dan muted untuk autoplay; pastikan codec-nya H.264.

2. 2.

   Layar hitam sebelum diputar

   Tambahkan gambar poster.

3. 3.

   Ukuran salah di seluler

   Gunakan width:100%; height:auto; aspect-ratio.

4. 4.

   File besar dimuat lambat

   Kompres atau streaming dari platform video.

Cara browser memilih sumber

Browser membaca elemen <source> dari atas ke bawah dan memutar yang pertama didukungnya. Karena itu Anda mencantumkan format yang lebih kecil dan modern (WebM) lebih dulu dan yang didukung secara universal (MP4) kedua. Atribut type memungkinkan browser melewati file yang tidak bisa diputarnya tanpa mengunduhnya — selalu sertakan. Teks di dalam <video> setelah sumber hanya ditampilkan oleh browser yang sama sekali tidak mendukung video.

<video controls preload="metadata" poster="poster.jpg">
  <source src="clip.webm" type='video/webm; codecs="vp9, opus"'>
  <source src="clip.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <a href="clip.mp4">Download the video</a>
</video>

Sesuaikan video dengan tata letak apa pun

Gunakan CSS untuk mengatur cara video mengisi kotaknya. object-fit: cover mengisi area dan memotong tepinya — ideal untuk section hero. object-fit: contain menampilkan seluruh frame dengan bilah di sisinya. Padukan dengan aspect-ratio untuk menyisihkan ruang sebelum file dimuat dan mencegah layout shift.

.video-box{aspect-ratio:16/9;width:100%}
.video-box video{width:100%;height:100%;object-fit:cover}

/* vertical clips */
.video-vertical{aspect-ratio:9/16;max-width:360px}

Picture-in-picture dan layar penuh

Browser modern memungkinkan Anda memindahkan video ke jendela mengambang atau layar penuh dari JavaScript — keduanya memerlukan gestur pengguna seperti klik.

const v = document.querySelector("video");

pipButton.onclick = async () => {
  if (document.pictureInPictureElement) await document.exitPictureInPicture();
  else await v.requestPictureInPicture();
};

fullButton.onclick = () => v.requestFullscreen();

Tambahkan disablepictureinpicture ke elemen jika Anda tidak ingin tombol PiP bawaan browser.

Lacak engagement video

Elemen video memicu event yang bisa Anda kirim ke alat analitik. Lacak pemutaran dimulai, selesai, dan tonggak kemajuan — bukan setiap timeupdate, yang terpicu beberapa kali per detik.

const v = document.querySelector("video");
const sent = new Set();
const track = (name) => window.gtag && gtag("event", name, { video_title: v.dataset.title });

v.addEventListener("play", () => track("video_start"), { once: true });
v.addEventListener("ended", () => track("video_complete"));
v.addEventListener("timeupdate", () => {
  const p = Math.floor((v.currentTime / v.duration) * 4) * 25; // 25, 50, 75
  if (p && p < 100 && !sent.has(p)) { sent.add(p); track("video_progress_" + p); }
});

Tag video, iframe, atau galeri?

Tag video adalah alat yang tepat untuk file pendek Anda sendiri: loop produk, latar belakang hero, penjelasan singkat yang Anda host di CDN. Untuk video di YouTube atau Vimeo, gunakan pemutar iframe mereka — pemutar itu menangani streaming, pergantian kualitas, dan teks. Saat Anda butuh banyak video, feed yang memperbarui dirinya sendiri, atau campuran platform, widget galeri menghemat Anda dari membangun playlist, popup, dan tata letak secara manual.