别再只写 <video src=""> 了，HTML 音视频嵌入的坑比你想的多

很多新手在做网页项目时，想把后台上传的课件视频或背景音乐放进去，往往认为复制一段 <audio> 或 <video> 代码就万事大吉。结果发布后遇到麻烦：Windows 能放，iPhone 打不开；桌面端正常，手机端进度条失效。这种体验断层，通常不是因为技术太难，而是忽略了标签背后的实际运行机制。

基础的嵌入语法确实简单，核心只有两个属性：controls 和 src。前者给用户展示播放控件，后者指向文件地址。但这只是入门，真正决定媒体能否顺利跑起来的关键，在于你如何处理格式兼容与加载策略。

这里有个最常见却容易被忽视的问题：文件格式。Web 标准中支持的音频视频格式不止一种，不同内核的浏览器对解码器的支持度天差地别。比如 WebM 格式虽然体积小且开源，但在部分旧版 iOS Safari 上可能无法播放。为了保证最大范围的兼容性，最稳妥的做法是准备多份源文件。你可以利用 <source> 子标签嵌套写法，依次列出 MP4、OGG 等不同格式的资源。浏览器会从上往下尝试，一旦识别出它能播放的格式就会停止匹配。对于视频文件，建议优先使用 H.264 编码的 MP4，这几乎是目前全平台的硬通货，能有效减少 80% 以上的播放失败率。

当你想要实现“打开页面自动播放”的效果时，更要格外小心。现代浏览器为了节省流量和提升体验，默认拦截带声音的自动播放行为。这意味着即使你写了 autoplay 属性，大多数情况下也不会生效。如果业务场景强依赖自动播放（比如背景氛围视频），唯一的出路是配合 muted 属性，让媒体静音启动。当然，如果是教学类课程，建议还是保留用户手动点击的操作权，强行静音开场往往会打断用户的认知节奏。

针对移动端适配，还有一个细节值得推敲。默认情况下，视频标签宽度往往是固定的，在小屏幕上容易溢出或被压缩变形。务必给容器或标签本身加上 CSS 样式限制，确保 max-width: 100% 和 height: auto。这样无论用户用的是大屏电脑还是窄屏手机，媒体内容都能自适应填满可用空间而不会破坏版面布局。

另外，加载性能直接影响跳出率。如果视频体积较大，不建议使用默认的加载策略。可以在标签中加入 preload="metadata"，告诉浏览器只在需要时读取文件头信息，而不是上来就把几兆甚至几百兆的数据全部下载完。配合 poster 属性设置一张预览封面图，即便网络卡顿，页面上也有一张静态图片撑场面，避免用户面对一片空白等待。

写完代码不代表结束，不同设备的测试才是收尾工作。同样的代码在 Chrome 调试器里表现完美，未必能在真实手机上复现。花几分钟时间，用真机走一遍流程，确认控件是否易触、音质是否正常、切换横竖屏有无崩坏。媒体元素是网页中最消耗资源的组成部分之一，处理好兼容性、控制权和加载时机，不仅能让代码更健壮，也是对用户耐心的一种保护。把这些细节做到位，你的网页才算真正具备“动起来”的能力。