跟着 MDN 学 HTML day_55：HTML 音频与视频嵌入实战指南

在现代网页设计中，多媒体内容已经成为提升用户体验的核心元素。无论是背景音乐、播客节目，还是产品演示视频，都离不开 HTML 中的音频和视频嵌入技术。HTML5 为我们提供了原生的 audio 和 video 元素，使得在网页中嵌入媒体内容变得异常简单，无需依赖任何第三方插件。

本文将带你通过两个实战任务，系统地掌握音频与视频嵌入的核心知识点。我们会从最基础的音频嵌入开始，逐步深入到多源视频、字幕轨道等高级功能，每一个知识点都配有完整的示例代码，帮助你彻底理解并掌握这些技能。

1. 音频嵌入基础：audio 元素与基本属性

在网页中嵌入音频文件，我们使用 HTML5 引入的 audio 元素。这个元素的设计理念是简单直观，让开发者能够像插入图片一样方便地插入音频内容。最基础的音频嵌入只需要一个 audio 标签和一个指向音频文件的 src 属性即可完成。

然而，仅仅设置 src 属性是不够的。如果没有额外的控制属性，用户在页面上将看不到任何与音频相关的界面元素，他们无法播放、暂停或调整音量。为了提供一个良好的用户体验，我们需要添加 controls 属性，这个布尔属性会指示浏览器显示一套默认的音频控制界面，包括播放按钮、进度条和音量调节器。

html 复制代码

<h1>Basic audio embed</h1>

<audio src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3" controls>
</audio>

在这个示例中，src 属性的值是一个绝对 URL，指向存储在 GitHub 上的一个 MP3 音频文件。controls 属性以布尔值的形式出现，只需写上属性名即可生效，不需要赋值。当浏览器解析到这个元素时，它会自动加载音频文件并在页面上渲染出一个播放器控件。如果你的音频文件路径是相对于当前 HTML 文档的，也可以使用相对路径，但要注意确保路径的正确性。

2. 视频嵌入基础：video 元素与尺寸控制

视频嵌入与音频嵌入非常相似，我们使用 video 元素来完成。和 audio 元素一样，video 元素同样支持 src 属性来直接指定视频文件的路径，也支持 controls 属性来显示默认的播放控件。但是视频与音频有一个显著的不同点：视频是可视化的内容，因此它拥有宽度和高度的概念。

为视频设置合适的尺寸是非常重要的。浏览器需要知道视频播放区域的大小，以便在页面加载时为视频预留空间，避免发生页面布局的剧烈跳动。我们可以通过 width 和 height 属性来直接设定视频的尺寸。这两个属性的值是以 CSS 像素为单位的数字，不需要带上单位。

html 复制代码

<h1>Basic video embed</h1>

<video src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4" 
       controls 
       width="320" 
       height="240">
</video>

这段代码创建了一个宽 320 像素、高 240 像素的视频播放器。src 属性指定了一个 MP4 格式的视频文件。设置视频的内在本征尺寸是一种最佳实践，它确保视频以其原始分辨率显示，避免不必要的缩放，同时也能让浏览器在视频加载前就计算出正确的布局空间。如果视频的原始尺寸与你设置的尺寸不匹配，视频会被缩放以适应指定的区域，保持其原始的宽高比。

3. 多源视频支持：source 元素与格式兼容性

在真实世界的 Web 开发中，单一视频格式往往无法覆盖所有浏览器。不同的浏览器支持不同的视频编码格式：有些浏览器支持 MP4，有些更倾向于 WebM，还有一些支持 Ogg。为了确保视频能够在尽可能多的浏览器中正常播放，我们需要提供多个视频源，让浏览器自己选择最合适的一个。

这时 source 元素就派上了用场。我们不再在 video 标签上直接使用 src 属性，而是在 video 标签内部放置多个 source 子元素，每个 source 元素指向一种视频格式。浏览器会按照 source 元素的顺序依次检查，选择第一个它能够解码的格式来播放。

为了帮助浏览器更高效地做出选择，我们还需要使用 type 属性来明确告知每个视频源的 MIME 类型。这样浏览器就不需要去下载视频文件的开头部分来判断格式，可以直接跳过不支持的格式。

html 复制代码

<video controls width="320" height="240">
  <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4" 
          type="video/mp4">
  <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm" 
          type="video/webm">
</video>

在这个例子中，我们提供了 MP4 和 WebM 两种格式的视频源。type 属性分别设置为 video/mp4 和 video/webm，准确地描述了文件的格式。当一个支持 WebM 的浏览器解析这段代码时，它会检查第一个 source，发现是 MP4 格式，如果它恰好也支持 MP4，就会选择 MP4；但如果某个浏览器只支持 WebM，它会跳过第一个 source，选择第二个 source 来播放。这种渐进增强的策略确保了最广泛的浏览器兼容性。

4. 静音播放与用户体验：muted 属性的妙用

在现代 Web 浏览器中，自动播放音频或视频通常受到严格的限制。许多浏览器会阻止任何未经用户交互就自动播放的有声媒体，因为这会对用户体验造成极大的干扰。然而，浏览器通常允许自动播放处于静音状态的视频。

muted 属性是一个布尔属性，当它出现在 video 或 audio 元素上时，媒体将默认以静音状态播放。这不仅可以满足某些设计需求（比如将视频作为背景动画），也可以作为一个技术策略：先以静音状态自动播放，然后提示用户取消静音来收听声音。

即使在用户手动触发播放的场景中，预设 muted 属性有时也是一种贴心的设计，尤其是在用户可能处于公共场合的情况下。

html 复制代码

<video controls width="320" height="240" muted>
  <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4" 
          type="video/mp4">
  <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm" 
          type="video/webm">
</video>

添加了 muted 属性后，视频加载完成后声音默认是关闭的。用户可以通过点击播放器控件中的小喇叭图标来取消静音。这个属性的存在非常简单，但它体现的是对用户浏览环境和偏好的尊重，是现代 Web 开发中不可忽视的一个细节。

5. 字幕与多语言支持：track 元素详解

视频内容对于听力障碍用户或者听不懂视频语言的用户来说，字幕是至关重要的。HTML5 通过 track 元素为视频提供了内置的字幕支持。track 元素作为 video 元素的子元素，用于指定定时文本轨道，这些轨道可以包含字幕、章节标题、描述信息等。

要正确添加字幕，track 元素需要以下几个关键属性：src 属性指向字幕文件（通常是 WebVTT 格式，即 .vtt 文件），kind 属性指定轨道类型（对于字幕来说应该是 subtitles），srclang 属性声明字幕的语言代码，以及 label 属性提供一个人类可读的轨道名称，方便用户在控件界面中进行选择。

html 复制代码

<video controls width="320" height="240" muted>
  <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4" 
          type="video/mp4">
  <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm" 
          type="video/webm">
  <track src="https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt" 
         kind="subtitles" 
         srclang="en" 
         label="English">
</video>

这个示例中，kind 设置为 subtitles 明确表示这是一个字幕轨道，它假定用户能够听到音频但需要文字辅助理解。srclang 的值 en 是英语的 ISO 639-1 语言代码，这有助于浏览器识别语言，也可能被屏幕阅读器等辅助技术使用。label 属性设置为 English，当用户点击播放器控件中的字幕按钮时，他们会看到这个标签，从而知道这是一条英语字幕轨道。

一个视频可以包含多个 track 元素，每个提供不同语言的字幕，让用户可以根据自己的需求自由切换，这极大地提升了网站的国际化无障碍水平。

6. 综合实战：构建一个功能完备的视频播放器

现在，让我们将之前学习的所有知识点整合起来，构建一个功能完备、生产级别的视频播放器。这个播放器将具备以下特性：多源视频格式支持以确保跨浏览器兼容性、默认的播放控件、精确的尺寸设定、默认静音以避免自动播放问题，以及一条可选的英语字幕轨道。

以下是完整的 HTML 代码，它代表了一个健壮的视频嵌入最佳实践：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>完整视频播放器示例</title>
</head>
<body>
  <h1>完整功能视频嵌入</h1>

  <video controls 
         width="320" 
         height="240" 
         muted>
    <!-- 提供多种视频格式以确保浏览器兼容性 -->
    <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4" 
            type="video/mp4">
    <source src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm" 
            type="video/webm">
    
    <!-- 添加英文字幕轨道 -->
    <track src="https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt" 
           kind="subtitles" 
           srclang="en" 
           label="English">
    
    <!-- 当浏览器不支持 video 元素时的回退内容 -->
    <p>很抱歉，您的浏览器不支持 HTML5 视频播放。请升级您的浏览器或<a href="video.mp4">下载视频文件</a>。</p>
  </video>

</body>
</html>

这个综合示例包含了几个值得强调的细节。首先，source 元素的顺序是重要的，通常将兼容性最广泛的格式（如 MP4）放在前面。其次，track 元素的 kind 属性明确设置为 subtitles，这意味着这些字幕是为能够听到音频内容的用户准备的翻译或文字辅助。另外，我们在 video 标签内部最后添加了一段回退文本，如果用户的浏览器完全无法识别 video 元素，他们将看到这条友好的提示信息，这是一个良好的可访问性实践。

通过这个完整的示例，你可以看到，一个专业的视频嵌入方案并不仅仅是把视频文件放在网页上，它涉及到格式选择、用户体验考量、无障碍支持等多个维度的综合决策。

结语

掌握 HTML 中的音频与视频嵌入技术，是现代前端开发者的必备技能。从最基础的 audio 元素和 controls 属性，到更复杂的 source 多源切换和 track 字幕轨道的配置，每一步都体现了 Web 标准在多媒体领域的强大能力。

今天我们通过两个核心任务，系统性地梳理了这些知识点。无论是简单的音频播放，还是带有字幕和多源支持的复杂视频播放器，其背后的原理都是一脉相承的。希望这篇实战指南能够帮助你牢固掌握这些技能，让你在未来的项目中能够自信地处理各种多媒体嵌入需求。记住，每一个细节的考量，比如静音设置和字幕语言标识，都是对用户体验的尊重和提升。

想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！