1. 视频放映机 <video>
🎥
放映员：
"只要给我一个 mp4 文件，我就能让它动起来！不需要任何插件！"
<video> 标签是 HTML5 的大明星。它让网页播放视频变得像插图片一样简单。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 Video 标签。
</video>
关键属性 (Attributes)：
controls: 显示播放、暂停、音量按钮（没有它用户怎么操作？）。width / height: 屏幕大小。autoplay: 自动播放（现在的浏览器为了不吓到用户，通常要求必须静音 muted 才能自动播放）。loop: 洗脑循环播放。poster: 视频加载前显示的封面图。
2. 音乐盒 <audio>
🎵
DJ 也是 HTML：
"看不见画面？没关系，声音更有想象空间！Audio 标签专门负责听觉盛宴。"
<audio> 和 <video> 是亲兄弟，用法几乎一模一样，只是没有画面。
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持 Audio 标签。
</audio>
支持的格式：
| 格式 |
扩展名 |
描述 |
| MP3 |
.mp3 |
最流行，基本所有浏览器都支持。 |
| WAV |
.wav |
无损音质，但文件巨大。 |
| Ogg |
.ogg |
开源格式，免费且高效。 |
3. 格式大乱斗
就像有人讲中文，有人讲英语，浏览器也有自己喜欢的视频格式。
为了保证每个人都能看到，我们需要准备多套方案（Sources）。
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器该升级啦！
</video>
4. 嵌入油管 (YouTube)
如果不想自己托管巨大的视频文件，最好的办法是借用视频网站的力量。
这就用到了之前学过的 <iframe> 标签！
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
💡
省流小妙招：
"用 iframe 嵌入视频网站的视频，既省服务器带宽，又不用操心格式兼容问题！"