HTML video 标签：controls、autoplay、poster 与字幕

如何添加视频

让 <video> 元素指向一个视频文件，并加上 controls，读者就能播放它：

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

controls 会显示浏览器自带的播放器：播放和暂停、进度条、音量和全屏。没有它，视频就只是静静地待在那里。这个预览无法加载视频文件，所以本页的示例用脚本绘制的一小段 canvas 动画作为视频来源；这些属性的效果和使用文件时完全一样：

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

因为来源是实时视频流而不是文件，这里的进度条无法拖动，也没有固定时长。换成真实的 .mp4，同一个播放器就会有完整的进度条。

video 属性

autoplay、muted 与 loop

浏览器会阻止带声音自动开始播放的视频。静音的视频可以自动播放，背景视频和循环短片就是这样实现的：

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

这四个属性要一起使用：autoplay 负责开始播放，muted 让浏览器允许播放，loop 用于循环短片，playsinline 防止 iPhone 以全屏打开。带声音的自动播放视频不仅会被阻止，对屏幕阅读器用户来说也是个问题，因为朗读的声音会被盖过。如果一段视频播放超过五秒，要给用户提供暂停的方法。

封面图与 preload

poster 在视频播放前显示一张图片，就像缩略图。这里的视频完全没有来源，所以只能看到封面图：

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

设置 preload="none" 时，读者按下播放前浏览器什么都不下载，封面图则让这块区域不至于显得空荡荡。如果想在播放前显示时长，就用 preload="metadata"。没有封面图时，大多数浏览器会在加载出第一帧后显示它。

用 source 提供格式和备用方案

除了 src，你还可以用 <source> 元素列出多个文件。浏览器会播放它支持的第一个：

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

H.264 编码的 MP4 能在当前所有浏览器中播放，所以只有一个文件时它是稳妥的选择。type 属性让浏览器不必下载就能跳过它无法播放的格式。末尾的文字只会在完全不支持 <video> 的浏览器中显示。

用 track 添加字幕

<track kind="captions"> 加载一个 WebVTT 文件，也就是一个按时间排列文字行的纯文本文件。浏览器会在控件中添加字幕按钮，并在视频上方绘制文字：

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.

字幕能帮助聋人和听障观众、关掉声音观看的人，以及用第二语言看视频的人。给 track 加上 default，无需点击就会显示字幕。来自其他域名的字幕文件需要 CORS 响应头，并在 video 上加 crossorigin。

设置样式并用 JavaScript 控制

视频和图片一样是替换元素：width: 100% 加上 height: auto 就能让它响应式缩放，object-fit 决定它如何填满形状不同的框。JavaScript 可以使用 play()、pause()、currentTime、volume，以及 play、pause 和 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() 会返回一个 promise，当浏览器阻止播放时（例如未静音的自动播放）它会被拒绝，所以正式代码应该用 catch 处理它。自己做控件不是必需的；内置的 controls 支持键盘操作且已本地化，自定义按钮必须把这些都重新实现。对于托管在 YouTube 或 Vimeo 上的视频，则改用 iframe 嵌入它们的播放器。

常见错误

• 使用 autoplay 却没有 muted。 浏览器会阻止它。加上 muted 和 playsinline。
• 忘了 controls。 除非你自己做控件，否则读者没有办法开始播放视频。
• 没有 width 和 height。 视频加载时页面会跳动。两个都设置，再用 CSS 缩放。
• 文件过大。 为网页压缩视频，页面下方的视频使用 preload="none" 或 "metadata"。
• 有人声的视频没有字幕。 加一个 <track kind="captions">。