HTML 视频 <video> 标签

Begindev 编辑部 March 25, 2026

<video> 标签允许你直接将视频内容嵌入到 HTML 页面中。

这消除了对外部插件或播放器的需求，提供了流畅且集成的用户体验。

在本章节中，我们将深入探讨 <video> 标签，研究它的属性、功能和最佳实践。

1 理解 `<video>` 标签

HTML5 中的 <video> 标签定义了一个视频或电影。

它是一个容器元素，可以包含一个或多个 <source> 标签，每个标签指向不同的视频文件。浏览器会自动选择它支持的第一个 <source>。只有当浏览器不支持 <video> 元素时，才会显示 <video> 标签内部的文本内容。

下面是一个关于如何使用 <video> 标签的基本示例：

<video controls width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  你的浏览器不支持 video 标签。
</video>

在这个例子中：

controls：添加了视频控件，如播放、暂停和音量调节。
width 和 height：指定了视频的尺寸。
<source> 标签：提供了不同的视频格式以实现浏览器兼容性。
文本“你的浏览器不支持 video 标签”：这是一条后备信息（fallback message）。

2. `<video>` 标签的关键属性

<video> 标签自带多种属性，允许你控制视频的播放、外观和行为。让我们来探索其中最重要的一些：

2.1 `src` 属性（较少使用）

虽然 <source> 标签是首选方法，但你也可以直接在 <video> 标签内使用 src 属性来指定视频源。不过，使用 <source> 标签更灵活，尤其是在提供多种格式时。

<video controls width="640" height="360" src="myvideo.mp4" type="video/mp4">
  你的浏览器不支持 video 标签。
</video>

2.2 `controls` 属性

controls 属性为视频播放器添加默认控件。这些控件通常包括播放/暂停、音量、进度条和全屏选项。

<video controls>
  <source src="myvideo.mp4" type="video/mp4">
</video>

如果不加 controls 属性，视频虽然可以加载，但用户无法控制播放（除非你用 JavaScript 编写自定义控件）。

2.3 `width` 和 `height` 属性

这些属性指定视频播放器的宽度和高度（以像素为单位）。设置这些属性是一个好习惯，可以防止视频加载时页面布局发生跳动（Reflow）。

<video controls width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.4 `autoplay` 属性

autoplay 属性告诉浏览器在页面加载时自动开始播放视频。

注意：使用此属性时要小心，因为它可能会惹恼用户。为了改善用户体验，许多现代浏览器会默认阻止带有声音的自动播放。

<video controls autoplay muted width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

提示：由于浏览器的自动播放策略，通常需要将 muted（静音）属性与 autoplay 一起使用，视频才能自动播放。

2.5 `loop` 属性

loop 属性会让视频在播放结束后自动重新开始。

<video controls loop width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.6 `muted` 属性

muted 属性会让视频静音。这通常与 autoplay 结合使用，以符合浏览器的自动播放策略。

<video controls autoplay muted width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.7 `poster` 属性

poster 属性指定在视频下载期间或用户点击播放按钮之前显示的图像（封面图）。

<video controls poster="thumbnail.jpg" width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

2.8 `preload` 属性

preload 属性指定页面加载时是否应该加载视频。它接受三个值：

auto：浏览器应在页面加载时加载整个视频。
metadata：浏览器应在页面加载时仅加载元数据（如时长、尺寸）。
none：浏览器不应在页面加载时加载视频。

<video controls preload="metadata" width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
</video>

使用 preload="metadata" 可以提高页面加载速度，而 preload="none" 可以节省带宽，特别是对移动设备用户而言。

3. `<source>` 标签

<source> 标签用于为 <video> 和 <audio> 元素指定多个媒体资源。它允许你提供不同的视频格式，确保在不同浏览器上的兼容性。

3.1 `src` 属性

<source> 标签的 src 属性指定视频文件的 URL。

<source src="myvideo.mp4" type="video/mp4">

3.2 `type` 属性

type 属性指定视频文件的 MIME 类型。这有助于浏览器理解文件格式并确定是否可以播放该视频。常见的视频 MIME 类型包括：

video/mp4：用于 MP4 视频
video/webm：用于 WebM 视频
video/ogg：用于 Ogg 视频

<source src="myvideo.webm" type="video/webm">

4. 提供多种格式

提供多种视频格式对于确保广泛的浏览器兼容性至关重要。

<video controls width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  <source src="myvideo.ogg" type="video/ogg">
  你的浏览器不支持 video 标签。
</video>

在这个例子中，浏览器会首先尝试播放 MP4。如果不支持 MP4，它会尝试 WebM，然后是 Ogg。如果都不支持，则显示后备信息。

5. 常见视频格式和编解码器

了解视频格式对于在不同平台上提供高质量视频至关重要：

MP4：支持最广泛的格式，使用 H.264 视频编解码器和 AAC 音频编解码器。质量好，兼容性强。
WebM：Google 开发的开源格式，使用 VP8 或 VP9 视频编解码器。它是免费的，非常适合网络使用。
Ogg：另一个开源格式，使用 Theora 视频编解码器。比 MP4 和 WebM 用得少。

5.1 选择建议：

浏览器兼容性：确保目标受众的浏览器支持该格式。
文件大小：在不牺牲太多质量的情况下优化视频以适应网络传输。
质量：选择在合理文件大小下提供良好视觉质量的编解码器。

6. 无障碍性考虑 (Accessibility)

提供字幕 (Captions)：字幕让失聪或听力障碍用户也能看懂视频。你可以使用 <track> 元素添加字幕（我们将在未来的章节中介绍）。
提供文本脚本 (Transcripts)：提供视频音频内容的文本版本。
提供音频描述：为视障用户提供描述视频视觉元素的旁白。
确保键盘可访问性：确保所有视频控件都可以通过键盘操作。

7. 实战示例与演示

7.1 示例 1：基础视频嵌入

嵌入一个带有控件、指定宽高和多个源格式的简单视频。

<!DOCTYPE html>
<html>
<head>
  <title>基础视频示例</title>
</head>
<body>
  <h1>我的视频</h1>
  <video controls width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.webm" type="video/webm">
    你的浏览器不支持 video 标签。
  </video>
</body>
</html>

7.2 示例 2：自动播放的静音视频

演示如何自动播放一个静音并循环播放的视频。

<!DOCTYPE html>
<html>
<head>
  <title>自动播放静音视频示例</title>
</head>
<body>
  <h1>自动播放视频</h1>
  <video autoplay muted loop width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.webm" type="video/webm">
    你的浏览器不支持 video 标签。
  </video>
</body>
</html>

7.3 示例 3：带有封面图的视频

演示如何使用 poster 属性在视频播放前显示图片。

<!DOCTYPE html>
<html>
<head>
  <title>带封面图的视频示例</title>
</head>
<body>
  <h1>带封面的视频</h1>
  <video controls poster="poster.jpg" width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.webm" type="video/webm">
    你的浏览器不支持 video 标签。
  </video>
</body>
</html>

1 理解 <video> 标签

2. <video> 标签的关键属性

2.1 src 属性（较少使用）

2.2 controls 属性

2.3 width 和 height 属性

2.4 autoplay 属性

2.5 loop 属性

2.6 muted 属性

2.7 poster 属性

2.8 preload 属性

3. <source> 标签

3.1 src 属性

3.2 type 属性