Tag Video HTML: Controls, Autoplay, Poster dan Subtitle

Cara menambahkan video

Arahkan elemen <video> ke sebuah file video dan tambahkan controls supaya pembaca bisa memutarnya:

<video src="movie.mp4" controls width="640"></video>

controls menampilkan pemutar bawaan browser: putar dan jeda, timeline, volume dan layar penuh. Tanpa atribut ini, videonya hanya diam di sana. Preview ini tidak bisa memuat file video, jadi contoh-contoh di halaman ini mengisi elemennya dari animasi canvas kecil yang digambar oleh script; atribut-atributnya bekerja persis sama seperti dengan file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Karena sumbernya adalah stream langsung, bukan file, timeline-nya tidak bisa digeser di sini dan tidak ada durasi yang tetap. Dengan .mp4 sungguhan, pemutar yang sama mendapat seek bar lengkap.

Atribut video

Autoplay, muted dan loop

Browser memblokir video yang mulai sendiri dengan suara. Video yang dibisukan boleh autoplay, dan begitulah cara kerja video latar belakang dan klip pendek yang berulang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

Keempat atribut itu bekerja sebagai satu set: autoplay untuk memulai, muted supaya browser mengizinkannya, loop untuk klip, dan playsinline supaya iPhone tidak membukanya di layar penuh. Video autoplay dengan suara bukan hanya diblokir, tapi juga menjadi masalah bagi pengguna screen reader, yang suaranya jadi tertutup. Kalau sebuah klip diputar lebih dari lima detik, beri orang cara untuk menjedanya.

Gambar poster dan preload

poster menampilkan gambar sebelum video diputar, seperti thumbnail. Di sini videonya sama sekali tidak punya sumber, jadi hanya poster yang bisa dilihat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

Dengan preload="none", browser tidak mengunduh apa pun sampai pembaca menekan putar, dan poster menjaga ruangnya supaya tidak terlihat kosong. Pakai preload="metadata" kalau kamu ingin durasinya terlihat sebelum diputar. Tanpa poster, kebanyakan browser menampilkan frame pertama begitu sudah memuatnya.

Format dan cadangan dengan source

Sebagai pengganti src, kamu bisa mencantumkan beberapa file dengan elemen <source>. Browser memutar yang pertama yang didukungnya:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

MP4 dengan video H.264 bisa diputar di semua browser saat ini, jadi itulah pilihan yang aman kalau kamu hanya punya satu file. Atribut type membuat browser bisa melewati format yang tidak bisa diputarnya tanpa harus mengunduhnya. Teks di bagian akhir hanya ditampilkan di browser yang sama sekali tidak mendukung <video>.

Subtitle dengan track

<track kind="captions"> memuat file WebVTT, yaitu file teks biasa berisi baris-baris berwaktu. Browser menambahkan tombol subtitle ke kontrolnya dan menggambar teksnya di atas video:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

Subtitle membantu penonton tuli dan yang punya gangguan pendengaran, orang yang menonton dengan suara mati, dan siapa pun yang mengikuti video dalam bahasa kedua. Tambahkan default ke sebuah track untuk menampilkannya tanpa perlu diklik. File subtitle dari domain lain butuh header CORS dan crossorigin pada videonya.

Styling dan kendali dengan JavaScript

Video adalah replaced element, seperti gambar: width: 100% dengan height: auto membuatnya responsif, dan object-fit menentukan cara video mengisi kotak dengan bentuk yang berbeda. JavaScript mendapat play(), pause(), currentTime, volume dan event seperti play, pause dan ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() mengembalikan promise yang ditolak saat browser memblokir pemutaran (misalnya autoplay dengan suara), jadi kode produksi sebaiknya menangkapnya dengan catch. Membuat kontrol sendiri itu opsional; controls bawaan bisa dipakai dengan keyboard dan sudah diterjemahkan, dan tombol kustom harus meniru semua itu. Untuk video yang disimpan di YouTube atau Vimeo, kamu menyematkan pemutar mereka dengan iframe.

Kesalahan umum

• Autoplay tanpa muted. Browser memblokirnya. Tambahkan muted dan playsinline.
• Lupa controls. Kecuali kamu membuat kontrol sendiri, pembaca tidak punya cara untuk memulai videonya.
• Tanpa width dan height. Halaman melompat saat video dimuat. Atur keduanya, lalu sesuaikan ukurannya dengan CSS.
• File yang sangat besar. Kompres video untuk web dan pakai preload="none" atau "metadata" untuk video yang letaknya lebih ke bawah di halaman.
• Tanpa subtitle pada video yang berisi ucapan. Tambahkan <track kind="captions">.