说到 <video> 和 <audio> 标签，很多刚入行的小伙伴可能觉得：“这不就是加个 controls 属性吗？随便拖个 MP4 进去就完了。” 嘿，要是真这么简单，前端开发里就不会有那么多关于“为什么在 iPhone 上没声音”或者“Android 老机型播放卡顿”的吐槽了。
作为一名在坑里摸爬滚打多年的“老手”，我得告诉你：HTML5 多媒体这块水，比你想的深多了。不同浏览器对编码的支持千差万别，移动端和桌面端的处理逻辑也不尽相同。今天咱就别整那些枯燥的说明书式文字，我直接带你过一遍那些最容易踩的坑，顺便给你一套能真正跑起来的“防弹”代码方案。
别急着写代码，先搞清楚“编码器”这回事
在 HTML5 普及之前，网页放视频全靠 Flash 插件。那时候 Adobe 说一不二，格式统一。但 Flash 死了以后，浏览器厂商开始各自为政，导致现在的世界变得异常复杂。
你需要明白一个核心概念：HTML5 标准并没有规定必须支持哪种视频格式，它只规定了浏览器必须实现一个 API。 这意味着，Chrome、Firefox、Safari、Edge 每家都有自己的“小算盘”。
目前主流的三大视频编码是：
- H.264 (MP4/MOV)：这是目前的“通用货币”，几乎所有浏览器和移动设备都支持。
- H.265/HEVC：效率更高，但专利问题导致 Safari 支持较好，Chrome 和 Firefox 在桌面端支持有限，移动端更是乱成一团。
- VP9 / AV1 (WebM)：Google 和开源社区推的，免费无专利费，压缩率高，但在老旧设备上兼容性稍弱。
音频方面也是类似，AAC 是跨平台的王者，MP3 兼容性最好但专利已过期（现在基本随便用），Ogg Vorbis 则主要是给 Firefox 这类开源浏览器准备的。
我的建议是： 除非你有极其特殊的理由（比如需要透明通道或者极致压缩且目标用户全是 Chrome 用户），否则请死守 H.264 + AAC 这一组合。这是目前唯一能保证“写到哪里都能播”的底线方案。
最常见的那些“阴沟里翻船”的错误
我在代码审查时，最常看到的错误就这三种，你可以对照一下自己有没有中招。
1. 忘了 preload 属性，或者乱用
很多开发者觉得视频嘛，用户点了就播，不用管预加载。但问题是，如果你的页面有很多视频，或者在网络不好的情况下，用户点击播放后会出现长时间的白屏或缓冲圈，体验极差。
反之，如果你盲目使用 preload="auto"，那么页面一打开，所有视频都会开始下载。想象一下，一个新闻页面有 10 个视频，用户只是来看看文字，结果带宽被视频占满了，页面其他内容加载缓慢，用户肯定想关掉它。
正确姿势：
- 如果视频是页面的核心内容（比如视频介绍页），用
preload="auto"。 - 如果视频只是装饰或列表项，不要设置
preload属性（默认值是metadata，只加载元数据，不加载内容），或者手动设为preload="none"，然后通过 JavaScript 在用户悬停或点击时再加载。
2. 只给一个 <source>，赌用户浏览器很新
我见过有人这么写：
<video controls src="movie.mp4"></video>
看起来没问题？错。如果这个用户用的是比较老的 Android 手机，或者某些特定的平板，可能支持 MP4 但不支持 H.264 的高配置编码。或者，他想在 Firefox 上优化加载速度，Firefox 其实更偏好 WebM。
只提供一个源文件，就是在赌。一旦赌输，用户看到的只有一个破碎的图标或者报错。
3. 忽略了移动端“全屏自动播放”的限制
这是最让人头大的地方。你在电脑浏览器上测试，autoplay 配合 muted 跑得飞起。结果一拿到 iOS 或者 Android 上测试，发现要么根本播不起来，要么播起来了没有声音。
关键知识点： 现代浏览器（尤其是 Chrome 和 Safari）为了节省用户流量和电池，默认禁止带声音的自动播放。你必须加 muted 属性才能实现自动播放。而且，在 iOS 的 Safari 中，即使你加了 muted，很多时候也需要用户先与页面产生一次交互（比如点击）才能触发播放。
真正的“跨浏览器兼容”解决方案
要想写出一个在任何设备上都“稳如老狗”的视频播放器，我们需要结合 HTML 的结构优势、CSS 的美化以及一点点的 JavaScript 兜底。
第一步：HTML 结构要扎实
不要只写一个标签，要给足“备选方案”。浏览器会从上到下尝试加载 <source>，如果都不支持，才会回退到 <video> 标签内部的提示文字。
<video
class="responsive-video"
controls
preload="metadata"
poster="https://example.com/poster.jpg"
playsinline>
<!-- 优先尝试 MP4 (H.264/AAC)，兼容性最广 -->
<source src="movie.mp4" type="video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"">
<!-- 备用 WebM，适合追求高压缩率和现代浏览器的场景 -->
<source src="movie.webm" type="video/webm; codecs=\"vp9, opus\"">
<!-- 如果浏览器太老，不支持 HTML5，给出提示 -->
您的浏览器不支持 HTML5 视频播放，请升级浏览器或访问 <a href="movie.mp4">此链接</a> 直接下载。
</video>
这里有几个细节值得抠一下：
playsinline属性：这是给 iOS Safari 的“救命符”。默认情况下，iPhone 播放视频会强制进入全屏模式，把用户从你的页面带走。加上playsinline，视频就会乖乖地在页面内播放，而不是弹全屏。这对于移动端体验至关重要。type属性：别懒！写上type属性可以让浏览器在决定下载前就判断自己是否能解码。如果没有type，浏览器可能要下载完一部分数据才发现解码不了，浪费流量和时间。我上面写的codecs参数稍微有点复杂，它是用来明确指定 H.264 的主配置级别的，能进一步避免某些老旧设备误判。poster：一定要加！它是在视频加载完成或用户点击播放前显示的静态图片。没有它，用户点击播放时会看到一黑屏或者空白，以为视频坏了，然后点击几下，最后发现是加载慢，然后骂骂咧咧地关掉页面。
第二步：CSS 让视频响应式布局
视频往往有不同的宽高比（16:9, 4:3, 1:1）。如果直接用 width: 100%，在手机上可能会撑破布局，或者在宽屏上拉得很长。
用一个经典的“Padding-Bottom 法”来保持容器比例：
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 的比例，如果是 4:3 就改成 75% */
overflow: hidden;
background-color: #000;
}
.responsive-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 或者 contain，根据你想要是否裁剪画面 */
}
这样，无论屏幕多宽，视频都会保持正确的比例，并且充满容器。
第三步：JavaScript 处理高级逻辑和兼容性兜底
虽然 HTML5 很强大，但有些浏览器仍然很“古董”。比如 IE11，虽然它支持 <video>，但对某些编解码器的支持非常有限。更重要的是，你需要通过 JS 来动态控制播放行为，特别是处理自动播放的策略。
下面是一个实用的 JS 示例，用于处理自动播放和错误捕获：
document.addEventListener('DOMContentLoaded', function() {
const videos = document.querySelectorAll('.responsive-video');
videos.forEach(video => {
// 尝试自动播放（必须静音）
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// 自动播放成功
console.log('视频自动播放成功');
})
.catch(error => {
// 自动播放被浏览器阻止，这是正常现象
// 可以考虑显示一个“点击播放”的提示层
console.log('自动播放被阻止，需要用户交互:', error);
// 添加点击事件，让用户手动播放
video.addEventListener('click', function() {
video.play();
video.removeEventListener('click', arguments.callee);
}, { once: true });
});
}
// 监听错误，提供友好的错误提示
video.addEventListener('error', function(e) {
console.error('视频加载错误', e);
// 这里可以显示一个错误信息的 DOM，替换掉原来的播放器
const errorMsg = document.createElement('div');
errorMsg.className = 'video-error-msg';
errorMsg.textContent = '视频加载失败，可能是格式不支持或网络问题。';
video.parentElement.appendChild(errorMsg);
});
});
});
这段代码做了几件很重要的事：
- 处理自动播放的“拒绝”：现代浏览器阻止自动播放时，
play()方法会返回一个 Promise，而不是直接抛出异常。我们用.catch()优雅地处理了这个情况，并给用户提供了一个手动播放的入口。 - 错误捕获：如果视频源 404，或者格式完全无法解析，用户会看到一个黑框。我们通过监听
error事件，给用户一个明确的文字提示，而不是让他们对着黑屏发呆。
音频标签的特殊坑点
音频标签 <audio> 的逻辑和视频类似，但有几个特别需要注意的点。
1. iOS 上的“后台播放”问题
在 iOS Safari 中，如果你播放音频，用户锁屏或切换到其他 App，音频可能会停止。如果你希望音频能在后台继续播放（比如做音乐播放器或播客应用），你需要在 <audio> 标签上加一个属性，或者更准确地说，是在 Web App Manifest 中声明，或者使用特定的 API。不过对于普通网页播放背景音乐，这通常不是问题。
2. Android 上的音量控制
有些旧版 Android 浏览器，当用户没有直接点击 <audio> 元素，而是通过页面其他按钮触发播放时，系统音量键可能无法控制音频音量。这是因为浏览器认为用户没有直接与媒体控件交互。
3. 一个完整的音频 HTML 模板
<audio controls preload="auto" id="myAudio">
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
<script>
const audio = document.getElementById('myAudio');
// 监听 play 事件，可以在这里更新 UI，比如显示进度条
audio.addEventListener('play', function() {
console.log('开始播放');
});
// 监听 ended 事件，用于自动播放下一首或循环
audio.addEventListener('ended', function() {
console.log('播放结束');
// this.currentTime = 0; // 重置到开头
// this.play(); // 循环播放
});
</script>
注意，这里我加了 .ogg 格式给 Firefox 备用。虽然 MP3 兼容性最好，但 WebM/Ogg 是无版权的，适合开源项目或注重隐私的平台。
总结：别跟浏览器斗，要引导它们
写 HTML5 多媒体代码，最忌讳的心态是“我的代码必须在这台设备上完美运行”。真相是，浏览器碎片化严重，设备性能参差不齐。
我们要做的，是渐进增强（Progressive Enhancement）：
- 提供一个能工作的主流格式（MP4/H.264）。
- 提供备选格式（WebM/VP9）给现代浏览器优化体验。
- 提供最低限度的 fallback（提示文字和下载链接）给古老浏览器。
- 用 CSS 保证视觉一致性。
- 用 JS 处理交互细节和错误兜底。
当你按照这个思路去写时，你会发现，那些曾经让你抓狂的“跨浏览器问题”，其实都有迹可循，也有解可寻。下次再遇到 iPhone 上视频不全屏的问题，记得加个 playsinline；遇到 Android 上自动播放失败，记得加个 muted 和 JS 捕获。
希望这份指南能帮你避开那些深坑，写出更健壮、更友好的多媒体网页。如果还有具体的兼容性问题，欢迎随时拿出来讨论，毕竟每一个 bug 都是成长的机会。