引入
HTML 不只能展示文字和图片，也可以直接在网页中播放音频、视频等媒体内容。
多媒体标签让网页内容更丰富，例如音乐播放、课程视频、产品演示等。
正文
定义
定义
HTML 多媒体主要指通过
<audio>、<video>等标签，在网页中嵌入音频和视频资源。
多媒体内容通常需要配合 src 指定资源路径，也可以用 <source> 提供多个格式。
音频
<audio> 用于在网页中嵌入音频。
<audio src="music.mp3" controls></audio>controls 表示显示浏览器默认的播放控件，例如播放、暂停、音量等。
如果不写 controls，用户通常看不到播放按钮。
视频
<video> 用于在网页中嵌入视频。
<video src="movie.mp4" controls width="400"></video>其中：
src用于指定视频文件的来源controls用于显示播放控件width用于设置视频显示宽度
多个资源格式
不同浏览器对媒体格式的支持可能不完全一样，可以使用 <source> 提供多个资源。
<video controls width="400">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持 video 标签。
</video>浏览器会按顺序选择自己能播放的格式。
最后一行文字是兜底内容，如果浏览器不支持 <video>，就会显示这段提示。
常见属性
controls
controls 用于显示播放控件。
<audio src="music.mp3" controls></audio>它是布尔属性，写上就表示开启。
autoplay
autoplay 表示自动播放。
<video src="movie.mp4" autoplay muted></video>很多浏览器为了避免打扰用户，会限制带声音的自动播放，所以自动播放视频通常需要配合 muted。
muted
muted 表示静音播放。
<video src="movie.mp4" controls muted></video>页面加载后视频默认没有声音。
loop
loop 表示循环播放。
<audio src="bgm.mp3" controls loop></audio>播放结束后会自动从头开始。
poster
poster 用于给视频设置封面图。
<video src="movie.mp4" controls poster="cover.jpg"></video>视频播放前会显示 poster 指定的图片。
preload
preload 用于提示浏览器是否提前加载媒体资源。
<video src="movie.mp4" controls preload="metadata"></video>常见值：
none表示不提前加载metadata表示只加载基本信息auto表示浏览器可以提前加载整个资源
这只是给浏览器的建议，最终是否加载由浏览器决定。
字幕
<track> 可以给视频添加字幕。
<video src="movie.mp4" controls>
<track src="subtitle.vtt" kind="subtitles" srclang="zh" label="中文">
</video>字幕对听力障碍用户、静音观看场景和视频理解都有帮助。
特点
<audio>用于嵌入音频<video>用于嵌入视频src用于指定媒体资源路径controls用于显示播放控件<source>可以提供多个媒体格式poster可以设置视频封面<track>可以添加字幕，提高可访问性
注意事项
- 音频和视频文件路径要写对，否则无法播放
- 不同浏览器支持的媒体格式可能不同，常见视频格式是
mp4 - 不建议滥用
autoplay，自动播放可能影响用户体验 - 自动播放视频通常需要配合
muted - 大视频文件会影响页面加载速度，需要注意文件大小
- 重要视频最好提供字幕，方便更多用户理解内容
理解
可以把 HTML 多媒体理解为“把音频和视频资源放进网页中”。
<audio> 和 <video> 本身负责搭建播放区域，真正播放的内容由 src 或 <source> 指定。
多媒体标签让网页不只是静态文字，也能承载声音、画面和更丰富的信息。
引出
理解多媒体之后，可以继续学习 HTML 路径，因为音频、视频、封面和字幕都依赖正确的资源路径。