HTML基础教程（三十三）多媒体：别让视频在你网站“躺平”！HTML多媒体速成指南，让页面原地起飞！

还记得拨号上网时代吗？那时网页是文字的天下，一张图片都要加载半天，视频？那简直是科幻小说里的概念。但今天，如果一个网站只有文字，你可能会下意识地按下后退键，心想：“这怕不是个上古遗迹？”

没错，我们早已进入了多媒体为王的时代。动态的内容能瞬间抓住用户的眼球，传递更丰富的信息和情感。而这一切的基石，就是HTML5为我们带来的两大“神器”——<audio>（音频）和<video>（视频）标签。

它们让嵌入多媒体内容变得像插张图片一样简单，但其中的门道，可比你想象的要深得多！准备好了吗？系好安全带，我们要让你的网页从“静态图片”升级到“IMAX影院”！

一、 “听”见你的网页：<audio>标签深度游

首先登场的是“气氛组组长”——音频。合适的背景音乐、清晰的播客内容、及时的提示音效，都能极大提升用户体验。

1. 基础语法：别再求Flash了！

在HTML5之前，嵌入音频往往需要Flash等第三方插件，既笨重又不安全。现在，一切变得如此优雅：

<audio controls>
  <source src="my-cool-beat.mp3" type="audio/mpeg">
  <source src="my-cool-beat.ogg" type="audio/ogg">
  您的浏览器太老啦，不支持audio标签，赶紧升级吧！
</audio>

看，就是这么简单！controls 属性提供了播放、暂停、音量等默认控制组件。而 <source> 标签则像是一个“备胎清单”，浏览器会从上到下依次检查，播放第一个它支持的文件格式。最后的提示文字是给那些还在用“上古”浏览器的用户的友好问候。

2. 关键属性：掌控播放的魔法开关

光是能播放还不够，你得能管住它：

• autoplay: 嗯……顾名思义，自动播放。但是！请慎用！ 突然响起的声音非常吓人且不礼貌，大多数现代浏览器甚至会阻止带有声音的自动播放。
• loop: 循环播放，适合做背景音乐（但同样请考虑用户感受，给他们一个关闭的选项！）。
• muted: 静音播放。这常与 autoplay 搭配使用，因为静音视频通常是被允许自动播放的，用于实现一些背景视频循环的效果。
• preload: 预加载策略，可选 aut