HTML基础教程（三十六）媒体之视频（Video）播放：别再用土味播放器了！HTML5视频标签竟是隐藏的瑞士军刀？

还记得那个被Flash支配的年代吗？网页视频播放总是卡顿、崩溃，还要不断更新插件？每次看到“缺少Flash插件”的提示，都想把电脑扔出窗外？

别怕，HTML5视频标签（<video>）就像超级英雄一样横空出世，拯救了我们于水火之中！这不仅仅是一个简单的标签，而是一把被严重低估的“瑞士军刀”，藏着无数让人惊叹的功能。

1. 从石器时代到智能时代：视频播放的进化史

让我们先来个小旅行，回到2010年以前。那时网页视频≈Flash Player，这个占据全球98%电脑的插件，却是个资源饕餮鬼——占用大量内存、频繁安全漏洞、移动设备根本不支持。

2010年，乔布斯发表著名的《Thoughts on Flash》公开信，直接判了Flash死刑。HTML5的<video>标签应运而生，成为开放 web 标准的重要一环。

如今，<video>标签原生支持所有现代浏览器，无需插件，更轻量，更安全，更高效。数据显示，使用HTML5视频可以将移动设备上的视频播放性能提升最多50%，电池消耗减少最多30%！

2. 基础入门：如何把一个视频扔进网页？

把视频放进网页简单到令人发指：

<video src="my-cool-video.mp4" controls>
  您的浏览器太老了，赶紧升级吧！
</video>

加上controls属性，浏览器就会自动生成默认的控制条（播放/暂停、音量、进度条等）。但等等，为什么我的视频在不同浏览器中显示不一样？

这就是第一个坑：视频格式兼容性。不同浏览器支持的视频格式不同：

MP4 (H.264): 所有现代浏览器都支持
WebM: Chrome、Firefox、Edge支持
Ogg: 老版Firefox、Opera支持

为了全覆盖，我们需要提供多种格式：

<video controls width="640">
  <source src="my-cool-video.mp4" type="video/mp4">
  <source src="my-cool-video.webm" type="video/webm">
  您的浏览器不支持HTML5视频，是该升级了！
</video>

浏览器会从上到下选择第一个支持的格式，完美！

3. 解锁隐藏技能：video标签的超级属性大全

<video>标签有一堆超实用的属性，像乐高积木一样随意组合：

<video controls autoplay muted loop preload="auto" poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

autoplay：自动播放（但现代浏览器要求同时设置muted）
muted