HTML 多媒体嵌入指南 — 音视频、iframe与外部内容
掌握HTML5多媒体元素：audio音频播放、video视频播放、iframe嵌入第三方内容、source多源适配、track字幕 · 难度：进阶 · +15XP
HTML 多媒体嵌入指南
现代网页早已不只有文字和图片。音频、视频、地图、社交媒体帖子——各种多媒体内容让网页生动起来。HTML5 提供了原生多媒体支持，无需安装Flash等插件。
audio — 音频播放
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持audio标签，请<a href="music.mp3">下载音频文件</a>
</audio>| 属性 | 说明 |
|---|---|
controls | 显示浏览器默认的播放控件（播放/暂停/音量/进度条） |
autoplay | 自动播放（大部分浏览器会阻止，需配合muted） |
loop | 循环播放 |
muted | 静音（配合autoplay使用可绕过浏览器限制） |
preload | 预加载策略：none(不预载)/metadata(仅元数据)/auto |
video — 视频播放
<video controls width="800" height="450" poster="video-cover.jpg">
<source src="tutorial.mp4" type="video/mp4">
<source src="tutorial.webm" type="video/webm">
<!-- 字幕轨道 -->
<track src="subtitles-zh.vtt" kind="subtitles" srclang="zh" label="中文字幕" default>
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
您的浏览器不支持video标签
</video>iframe — 嵌入任何外部内容
<iframe> 是网页中的网页——它可以在你的页面中嵌入另一个完整的HTML文档。最常见的用途是嵌入地图、视频、社交媒体内容。
<!-- 嵌入百度地图 -->
<iframe
src="https://api.map.baidu.com/staticimage?center=108.37,22.82&zoom=14"
width="600" height="400"
style="border:0"
allowfullscreen
loading="lazy"
title="武鸣大学城位置">
</iframe>
<!-- 嵌入B站视频 -->
<iframe
src="//player.bilibili.com/player.html?bvid=BV1xx411c7mD&page=1"
width="800" height="500"
scrolling="no"
allowfullscreen
loading="lazy">
</iframe>
<!-- 嵌入网易云音乐 -->
<iframe
src="//music.163.com/outchain/player?type=2&id=123456&auto=0&height=66"
width="330" height="86"
frameborder="no">
</iframe>
iframe 安全注意事项
| 属性 | 值 | 说明 |
|---|---|---|
sandbox | allow-scripts allow-same-origin等 | 限制iframe中的行为（推荐始终设置） |
referrerpolicy | no-referrer / strict-origin | 控制是否发送Referer头 |
loading | lazy / eager | 懒加载iframe（提升页面性能） |
<!-- 安全的iframe：添加sandbox限制 -->
<iframe src="https://example.com"
sandbox="allow-scripts allow-same-origin"
referrerpolicy="no-referrer"
loading="lazy">
</iframe>动手练习
- 制作视频课程页：创建一个带有video标签的页面，嵌入一段视频，配置poster封面图、controls控件、以及中文字幕track。
- 嵌入地图导航：使用iframe在你的页面上嵌入你学校/公司的位置地图（百度/高德地图），设置合适的宽高和加载策略。
- 多媒体课程卡片：综合运用audio、video、iframe，制作一个多媒体学习中心页面，包含：一段背景音乐（audio）、一个教学视频（video）、一个嵌入式地图（iframe）、一个嵌入式B站视频（iframe）。