HTML 教程 / 嵌入音频、视频与外部内容

HTML

创建时间 2026-11-03 最后修改 2026-11-03

HTML 可以使用audio和video播放多媒体文件，或者使用iframe在页面内显示其他文档。成功嵌入取决于实际的文件路径和支持的格式。有用的控制、字幕或转录以及外部内容的可靠性也很重要。

播放音频和视频文件

该示例假定 sample.mp3、sample.mp4 和 sample-poster.webp 位于 HTML 文件所在的文件夹中。要运行它，请提供可使用的文件，并根据需要调整名称。媒体文件也需要正确的文件名、路径和尺寸，遵循使用 img 插入图片：替代文本与尺寸。

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

<video controls width="640" height="360" poster="sample-poster.webp">
  <source src="sample.mp4" type="video/mp4">
  <track src="sample-zh.vtt" kind="captions" srclang="zh-CN"
         label="中文字幕" default>
  您的浏览器不支持视频播放。
</video>

controls 提供浏览器的播放控制功能，poster 会在视频播放前显示。对于语音或有意义的声音，请提供准确的字幕。引用的 sample-zh.vtt 不会自动创建。没有该文件，字幕将无法显示。

WebVTT 字幕文件是 UTF-8 文本。这个最小示例只显示了前三秒的一个字幕；实际的字幕应覆盖视频中对应时间的语音内容和重要声音。

WEBVTT

00:00:00.000 --> 00:00:03.000
欢迎来到小花园。

将此文本保存为 sample-zh.vtt 并使用 UTF-8 编码。在时间行和字幕文本之间不应有空行。空行仅用于分隔下一个字幕块。 MDN 上的 WebVTT 参考描述了该格式的结构。

当通过音频传递重要信息时，也请提供文本转录。让用户自己启动播放，而不是意外自动播放声音。如果提供多种source格式，底层文件必须实际使用这些格式；仅更改扩展名不会转换文件的实际格式。

使用 iframe 嵌入外部内容

iframe会在当前页面中显示另一个文档。下面的URL是结构占位符，不是可用的媒体嵌入。请将其替换为提供商提供的官方嵌入URL。

<iframe
  src="https://example.com/embed/example"
  title="示例内容演示"
  width="640" height="360"
  loading="lazy"></iframe>

title 描述了框架的用途。提供者可以禁止嵌入，即使其网页的正常 URL 可用。外部内容可能会影响隐私、Cookie 和性能，因此仅在可信提供者提供附加价值时使用其官方嵌入代码。在周围文本中提供嵌入元素的标题或上下文，以便即使无法加载，该文章仍然易于理解。

调整媒体并测试本地框架

在 HTML 中把宽度设置为 640，不会自动让元素适应较窄的视口。将这段 CSS 放入 head 中的 style 元素或链接的样式表文件中。视频将保持其固有比例；iframe 练习使用 16:9 的显示区域。如果嵌入的内容需要其他比例，请调整此比例。

video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

您可以在没有视频文件的情况下测试框架的文件路径、布局和备用导航。将这两个文件一起保存为UTF-8格式。此练习不依赖于任何外部服务或个人数据。

embed.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>练习说明</title>
</head>
<body>
  <h1>小花园的说明</h1>
  <p>此本地示例在一个iframe中显示。</p>
</body>
</html>

frame.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>iframe练习</title>
  <style>
video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
  </style>
</head>
<body>
  <h1>阅读说明</h1>
  <iframe src="embed.html" title="小花园的说明" width="640" height="360"></iframe>
  <p><a href="embed.html">在单独页面打开说明</a></p>
</body>
</html>

打开 frame.html 并检查嵌入的标题和段落，然后测试框架是否适应 390px 的窗口。此外，点击链接访问单独的页面。如果以后使用外部嵌入，请检查该提供商的官方网站 URL 及其嵌入指南。

WebVTT 是一种将时间间隔与字幕关联的文本格式。如果本地文件的字幕无法显示，请首先检查字幕的存在、扩展名、UTF-8 编码和时间间隔，然后通过使用相同来源的 HTML、视频和来自同一 HTTP 开发服务器的 VTT 进行比较。文件 URL 的限制和服务器的媒体类型可能会影响加载。仅重命名扩展名并不等于媒体转换。

<p><a href="sample.mp4">打开示例视频文件</a></p>
<p><a href="transcript.html">阅读视频文字记录</a></p>

将替代内容定位到您实际准备好的文件和转录内容。音频/视频元素中的替代文本是为不支持该元素的浏览器准备的；它并不是在兼容浏览器无法加载文件时显示的保证性错误信息。在播放器之外也要提供所需的替代内容和转录文本。

如果媒体无法播放或不适配

检查文件是否存在于指定路径，并且服务器是否发送了相应的媒体类型。
检查浏览器是否支持文件的实际编码，而不仅仅是文件名的扩展名。
使用 CSS 在小屏幕上限制宽度，而不扭曲视频的纵横比。
对于外部内容，请检查提供商的嵌入指南和条款。

请参阅视频参考 MDN 和 iframe 元素参考以了解元素特定属性。在辅助功能基础知识：标题、链接、图像和键盘中手动测试的范围适用于播放控件、替代链接和键盘使用。

HTML