音视频与嵌入

HTML5 之前,网页里嵌视频音频要靠 Flash 等插件,又慢又麻烦。HTML5 直接内置了 video、audio 标签,加上万能的 iframe 可以嵌入任何外部页面。这一章讲清这些"富媒体"标签的用法。

1. video 视频标签

video 用于在网页里嵌入视频。最简单的写法只需 src,但强烈建议加 controls 否则用户没法控制播放:

<!-- 基本用法:src 指定视频地址 -->
<video src="movie.mp4"></video>

<!-- 推荐写法:controls 显示控制条 -->
<video src="movie.mp4" controls></video>

<!-- 完整属性 -->
<video
  src="movie.mp4"
  controls       <!-- 显示播放控制条 -->
  autoplay       <!-- 自动播放(浏览器限制,通常需 muted) -->
  muted          <!-- 静音 -->
  loop           <!-- 循环播放 -->
  poster="cover.jpg"   <!-- 封面图(播放前显示) -->
  width="640"
  preload="metadata"   <!-- metadata/none/auto:预加载策略 -->
>
  您的浏览器不支持 video 标签。
</video>

关键属性:

2. 多源 source 子标签

不同浏览器支持的视频格式不同(MP4 / WebM / OGG),为了兼容性,推荐用 source 子标签提供多个源,浏览器按顺序选第一个能播放的:

<!-- 多源:浏览器选第一个能播放的 -->
<video controls>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <p>您的浏览器不支持 video,请<a href="movie.mp4">下载</a>观看。</p>
</video>
<!-- 不同浏览器支持不同格式,多源是兼容性最佳实践 -->

注意:同时使用 src 属性和 source 子标签时,子标签会被忽略。多源时只用 source,不要在 video 上写 src。

3. 视频格式选择

最佳实践:同时提供 MP4 + WebM 两个源,MP4 兜底,WebM 提升性能。

4. audio 音频标签

audio 用于嵌入音频,用法和 video 几乎一样,但没有 poster/width/height(因为本身没画面):

<audio src="song.mp3" controls></audio>

<!-- 完整属性(类似 video,但没有 poster/width/height) -->
<audio
  src="song.mp3"
  controls
  autoplay
  loop
  preload="auto"
>
  您的浏览器不支持 audio 标签。
</audio>

<!-- 多源 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>

常用于播客、背景音乐、音乐播放器。同样推荐用 source 多源,提供 MP3 + OGG。

5. iframe 嵌入任意页面

iframe 是"内联框架",可以在你的页面里嵌入另一个完整页面。最常见用途:

<!-- 嵌入其他页面:src 指定 URL -->
<iframe src="https://example.com" width="800" height="600">
</iframe>

<!-- 嵌入 YouTube 视频 -->
<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed/视频ID"
  title="YouTube 视频播放器"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write"
  allowfullscreen>
</iframe>

<!-- 嵌入 Google 地图 -->
<iframe
  src="https://www.google.com/maps/embed?..."
  width="600" height="450"
  style="border:0;">
</iframe>

关键属性:

6. 嵌入 YouTube / B 站视频

YouTube、B 站、Vimeo 这些视频网站都提供"分享"功能,里面会有嵌入代码,直接复制粘贴到你的 HTML 即可:

<!-- 嵌入其他页面:src 指定 URL -->
<iframe src="https://example.com" width="800" height="600">
</iframe>

<!-- 嵌入 YouTube 视频 -->
<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed/视频ID"
  title="YouTube 视频播放器"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write"
  allowfullscreen>
</iframe>

<!-- 嵌入 Google 地图 -->
<iframe
  src="https://www.google.com/maps/embed?..."
  width="600" height="450"
  style="border:0;">
</iframe>

注意 src 是 embed 路径,不是普通的观看路径。每个视频的"分享 → 嵌入"按钮会给你完整代码。

7. iframe 的安全风险

iframe 强大但有风险:嵌入的页面可以执行 JS,如果不做限制可能影响你的页面。常用 sandbox 属性沙箱化:

还有 referrerpolicy、csp 等机制可以进一步加强。嵌入第三方页面时务必加 sandbox。

8. embed 和 object 标签

老一点的标签 embed 和 object 也能嵌入 PDF、Flash 等内容,但 HTML5 时代大部分场景被 video、iframe 替代。新项目优先用 video/iframe,仅在嵌入 PDF、SVG 等特殊场景才考虑 object/embed。

9. track 字幕

给视频配字幕用 track 子标签,加载 WebVTT 格式的字幕文件:

<!-- 基本用法:src 指定视频地址 -->
<video src="movie.mp4"></video>

<!-- 推荐写法:controls 显示控制条 -->
<video src="movie.mp4" controls></video>

<!-- 完整属性 -->
<video
  src="movie.mp4"
  controls       <!-- 显示播放控制条 -->
  autoplay       <!-- 自动播放(浏览器限制,通常需 muted) -->
  muted          <!-- 静音 -->
  loop           <!-- 循环播放 -->
  poster="cover.jpg"   <!-- 封面图(播放前显示) -->
  width="640"
  preload="metadata"   <!-- metadata/none/auto:预加载策略 -->
>
  您的浏览器不支持 video 标签。
</video>

字幕文件后缀 .vtt,内容是带时间戳的文本。配 kind="subtitles"(翻译字幕)或 kind="captions"(同语言字幕)。对无障碍很重要。

10. 媒体的无障碍与 SEO

11. 性能建议

小结

这一章你学会了在网页里嵌入视频(video)、音频(audio)、外部页面(iframe),知道了 YouTube/地图的嵌入技巧、多源兼容性、安全沙箱。下一篇我们看 HTML 中经常被忽视但极重要的——meta 标签与 SEO。

← 上一篇 语义化标签

下一篇 meta 与 SEO →

✈️💬