Thẻ video trong HTML: controls, autoplay, poster và phụ đề

Cách chèn video

Trỏ phần tử <video> tới một tệp video và thêm controls để người xem có thể phát:

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

controls hiển thị trình phát có sẵn của trình duyệt: phát và tạm dừng, thanh thời gian, âm lượng và toàn màn hình. Không có nó, video chỉ nằm im đó. Bản xem trước này không tải được tệp video, nên các ví dụ trên trang này cấp dữ liệu cho phần tử từ một hoạt ảnh nhỏ trên canvas do script vẽ ra; các thuộc tính hoạt động y hệt như với một tệp:

<!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>

Vì nguồn là một luồng trực tiếp chứ không phải tệp, ở đây bạn không kéo được thanh thời gian và video không có độ dài cố định. Với một tệp .mp4 thật, cùng trình phát này sẽ có thanh tua đầy đủ.

Thuộc tính của video

Autoplay, muted và loop

Trình duyệt chặn video tự phát có tiếng. Video đã tắt tiếng thì được tự phát, đó là cách video nền và các đoạn clip ngắn lặp lại hoạt động:

<!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>

Bốn thuộc tính này đi thành một bộ: autoplay để bắt đầu, muted để trình duyệt cho phép, loop cho clip lặp lại, và playsinline để iPhone không mở toàn màn hình. Video tự phát có tiếng không chỉ bị chặn, mà còn gây khó cho người dùng trình đọc màn hình vì giọng đọc bị át đi. Nếu clip phát lâu hơn năm giây, hãy cho người xem cách tạm dừng.

Ảnh poster và preload

poster hiển thị một ảnh trước khi video phát, giống ảnh thu nhỏ. Ở đây video không có nguồn nào, nên chỉ có ảnh poster để xem:

<!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>

Với preload="none", trình duyệt không tải gì cho đến khi người xem bấm phát, và ảnh poster giúp khoảng trống không trông trống trải. Dùng preload="metadata" khi bạn muốn hiển thị thời lượng trước khi phát. Không có poster, hầu hết trình duyệt hiển thị khung hình đầu tiên khi đã tải được nó.

Định dạng và dự phòng với source

Thay vì src, bạn có thể liệt kê nhiều tệp bằng các phần tử <source>. Trình duyệt phát tệp đầu tiên mà nó hỗ trợ:

<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 với video H.264 phát được trên mọi trình duyệt hiện nay, nên đó là lựa chọn an toàn khi bạn chỉ có một tệp. Thuộc tính type giúp trình duyệt bỏ qua những định dạng nó không phát được mà không cần tải về. Đoạn chữ ở cuối chỉ hiện trên những trình duyệt hoàn toàn không hỗ trợ <video>.

Phụ đề với track

<track kind="captions"> tải một tệp WebVTT, tức tệp văn bản thuần chứa các dòng có mốc thời gian. Trình duyệt thêm nút phụ đề vào bộ điều khiển và vẽ chữ lên trên 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.

Phụ đề giúp người khiếm thính và nghe kém, người xem khi tắt tiếng, và bất kỳ ai theo dõi video bằng ngôn ngữ thứ hai. Thêm default vào một track để hiển thị nó mà không cần bấm. Tệp phụ đề từ tên miền khác cần header CORS và thuộc tính crossorigin trên video.

Định kiểu và điều khiển bằng JavaScript

Video là một phần tử thay thế (replaced element), giống như ảnh: width: 100% cùng height: auto làm nó responsive, còn object-fit quyết định cách nó lấp đầy một khung có hình dạng khác. JavaScript có play(), pause(), currentTime, volume và các sự kiện như play, pause và 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() trả về một promise bị reject khi trình duyệt chặn việc phát (ví dụ autoplay không tắt tiếng), nên code chạy thật cần catch nó. Tự xây bộ điều khiển là tùy chọn; controls có sẵn dùng được bằng bàn phím và đã được dịch sẵn, những thứ mà nút tự làm phải tự xử lý lại. Với video lưu trên YouTube hay Vimeo, bạn nhúng trình phát của họ bằng iframe.

Lỗi thường gặp

• Autoplay mà không có muted. Trình duyệt sẽ chặn. Thêm muted và playsinline.
• Quên controls. Trừ khi tự xây bộ điều khiển, người xem không có cách nào để phát video.
• Không có width và height. Trang bị giật khi video tải xong. Đặt cả hai, rồi co giãn bằng CSS.
• Tệp quá nặng. Nén video cho web và dùng preload="none" hoặc "metadata" cho video nằm thấp trong trang.
• Video có lời nói mà không có phụ đề. Thêm một <track kind="captions">.