网页嵌套视频死活不自动播放？这些坑我都帮你踩过了

上周给客户做企业官网时，遇到个让人抓狂的问题：按要求在首页轮播图里嵌入宣传视频，代码明明写对了，但死活不自动播放。作为一个从业5年的前端，我居然被这个”基础问题”折腾了整整一下午。今天就把这个血泪教训总结成避坑指南，建议收藏！

1. 先检查最基本的 autoplay 属性

新手最容易忽略的就是这个：虽然写了 autoplay 属性，但很多浏览器现在要求必须同时加上 muted（静音）才能自动播放。这是 Chrome 66+ 引入的自动播放策略。

<!-- 错误示范 -->
<video src="promo.mp4" autoplay></video>

<!-- 正确姿势 -->
<video src="promo.mp4" autoplay muted></video>

2. 移动端是个大坑王

你以为桌面浏览器测试通过就完事了？太天真！iOS 和部分安卓机型会有这些骚操作：

• 必须添加 playsinline 属性，否则全屏播放
• 某些机型需要用户首次交互后才能触发自动播放
• 微信内置浏览器有自己的一套规则（说多了都是泪）

<!-- 移动端兼容写法 -->
<video autoplay muted playsinline webkit-playsinline>
  <source src="promo.mp4" type="video/mp4">
</video>

3. 试试用 JavaScript 兜底方案

当HTML属性不奏效时，可以尝试用JS控制。注意要在 canplay 事件触发后再执行：

const video = document.querySelector('video');
video.addEventListener('canplay', () => {
  video.play().catch(e => {
    console.log('自动播放被阻止:', e);
    // 这里可以添加播放按钮让用户手动触发
  });
});

我在实际项目中发现，Safari 有时需要额外加上这个骚操作：

// 针对 Safari 的 hack
video.setAttribute('autoplay', '');
video.muted = true;
video.play();

4. 终极方案：假装是 GIF

如果以上方法都失效（特别是某些国产浏览器），可以考虑用 animation/video 替代方案。比如：

• 使用 quicklink 预加载视频
• 用 Canvas 逐帧渲染（适合短小视频）
• 直接放第一帧图片 + 播放按钮（最保险）

记得在项目上线前，一定要用 BrowserStack 做多平台测试。那次我就是在华为P30上发现视频无法播放，最后发现是EMUI系统的限制…

大家如果还遇到其他奇葩情况，欢迎在评论区交流。前端这行就是这样，永远有意想不到的坑等着我们（苦笑）。