先给结论：微信内置浏览器里视频播放不了，绝大多数落在三个原因上——没写 playsinline 导致 iOS 用自带播放器全屏接管、没有用户手势就调用播放被系统拦截、视频地址或编码格式不被支持。前两个补上属性和手势就能解决，第三个要换资源。

新手最容易的表现是：同一段页面代码在电脑浏览器里一切正常，发给同事用手机点开就白屏或者只听见声音，于是怀疑是微信把页面屏蔽了。

本文按这三个原因给出可复制的最小标记与脚本，说明每种情况下的表现、怎么判断、以及怎么改。涉及移动端内核的规则以通用行为为准，具体机型的差异会在边界一节说明。

先看结论

• 视频播放不了先补 playsinline：iOS 上缺了这个属性，播放会被系统播放器接管并跳全屏，页面上的布局全部失效。
• 播放必须由用户手势触发：没有点击就调用播放会被直接拒绝，静音播放是唯一的例外。
• 地址和格式同样重要：不支持的编码、跨域未授权、非加密地址都可能让视频播不出来。

一、最小场景：一段能播的标记

把问题定死：页面上要内嵌一个短视频，点按钮开始播放，不跳全屏。

<video
  id="clip"
  src="https://example.com/demo.mp4"
  playsinline
  webkit-playsinline
  x5-playsinline
  preload="metadata"
  poster="cover.jpg"
></video>
<button id="playBtn">开始播放</button>

这段做的是把三条内联播放属性一次性补齐，其中带前缀的两条分别对应旧版本 Safari 与微信内的内核。少了第一条，iOS 上就会跳到系统全屏播放器。

<script>
  const clip = document.getElementById('clip');
  document.getElementById('playBtn').addEventListener('click', () => {
    clip.play().then(() => {
      console.log('播放已开始');
    }).catch((err) => {
      console.log('播放被拒绝：', err.name);
    });
  });
</script>

这段做的是把播放动作绑在点击上，并捕获拒绝的情况。预期结果（未在本机执行）：点击后视频在当前位置开始播放；若在页面加载时就调用，控制台会输出被拒绝的错误名。

完整的属性含义可以对照 HTML5 教程 里的媒体章节核对。

二、三个原因逐个排查

视频播放不了的三个原因，按出现频率从高到低排，逐个排除最快。

2.1 缺少内联播放属性

iOS 上的默认行为是用系统播放器全屏接管视频，页面上盖的标题、按钮全部看不见。加上内联播放属性后，视频才会留在页面里按你的布局显示。

判断方式：如果点击后界面跳成了系统的全屏播放页，就是这个原因。这三个属性要写成无值的布尔属性，写成带值的形式在部分内核上不生效。

2.2 没有用户手势就触发播放

视频播放不了但控制台没有任何报错，通常就是这一类：没有用户手势。移动端普遍禁止未经交互的自动播放，目的是避免流量被悄悄消耗。直接在加载完成回调里调用播放，会被拒绝并抛出一个拒绝错误。

唯一的例外是静音播放：加上静音属性后允许自动开始，代价是没有声音，通常配合"点击开启声音"的按钮使用。

2.3 地址、编码与跨域

视频播放不了且直接触发错误分支，属于资源本身的问题：视频编码不是主流格式、服务器没允许跨域、或者页面是加密地址而视频不是。表现通常是直接触发错误分支，或者一直卡在加载中。

适用边界要讲清：这类问题的排查必须看网络面板的响应状态，光改页面代码没有用。把视频换成同一目录下的主流编码文件做对照，能最快区分到底是格式问题还是环境问题。要进一步确认系统层面的限制，iOS 教程 里的相关章节可以作为参照。

三、微信环境的额外限制

微信内置浏览器在安卓上使用的内核与 iOS 上的行为并不一致，同一份代码两端表现不同是常态。

常见的差异有两类：一是部分安卓机型上视频会默认浮在页面最上层，盖住弹窗，需要额外声明同层播放；二是页面被转发到聊天里之后，首帧加载策略可能变化，导致封面正常但点击无反应。

处理方式是把样式与层级相关的问题当成独立问题处理，不要和播放逻辑混在一起调。标记写法不确定时，查 HTML 参考手册 里对应标签的属性列表最稳妥。

四、验证清单

4.1 点击后跳全屏

补三条内联播放属性，注意写成无值形式。

4.2 点击无反应但没报错

视频播放不了又看不到报错，多半是资源还没加载完。先监听可播放事件，再允许点击。

4.3 报拒绝错误

自动播放被拦截。改成由点击触发，或者加静音属性走静音自动播放。

4.4 验证清单

• 检查：确认三条内联播放属性都已写上且无值
• 运行：用真机在微信里点开页面，点击按钮播放
• 预期：视频在页面内原地播放，不跳全屏
• 失败：仍跳全屏就检查属性是否写成了带值形式
• 修复：把播放调用挪进点击事件，并补上失败分支
• 验证：iOS 与安卓各测一台，两端结果一致才算通过

总结

微信里视频播放不了，先怀疑播放属性和触发时机，再怀疑资源本身。按"属性—手势—资源"这个顺序排查，绝大多数问题在前两步就能定位。

三条要点带走：

• 内联播放三条属性要写全，且写成无值形式；
• 播放必须由用户手势触发，静音是唯一可以自动播放的例外；
• 排不动时换一个同目录的主流编码文件做对照，快速区分格式与环境。

下一步建议把"视频相关属性一次性写全"固化成页面模板，并在播放调用处统一加失败分支。属性细节可以对照 HTML 速查手册 再核一遍。

常见问题

Q：为什么电脑上正常，手机上就不行？

A：移动端对自动播放和全屏接管的策略与桌面端不同。补齐内联播放属性、把播放挪到点击事件里，通常就能解决。

Q：加了属性还是跳全屏怎么办？

A：检查属性是不是写成了带值的形式，布尔属性应当只写名字。另外确认没有第三方库在运行时把它覆盖掉。

Q：能不能一进页面就自动播放？

A：只有静音状态下可以。需要声音就必须由用户点击触发，这是移动端的统一策略，不是某个应用的限制。

Q：视频盖住了我的弹窗怎么处理？

A：这是同层播放的问题，属于样式层级范畴。把弹窗的层级调高，或改用页面内自建的控制条替代原生控件。

Q：iOS 系统的版本会影响这些行为吗？

A：会。不同版本对内联播放与自动播放的宽松程度有差异。视频播放不了只在个别机型上出现时，先记下系统版本再对照，真机覆盖测试仍然不可替代。

延伸学习

想把这个知识点补扎实，可以按这个顺序来：

1. 想把标记基础补系统，HTML入门课程(含HTML5) 可以跟一遍；
2. 读一篇相关笔记 移动端 video 兼容问题，看别人踩过的坑；
3. 想随手验证一段代码，用 HTML 在线运行 跑一遍最快。