移动端浏览器（尤其是 iOS Safari 和 Android Chrome）默认禁止视频自动播放，需显式添加 autoplay 和 muted 属性，并确保视频编码兼容，才能实现无交互触发的播放效果。
移动端浏览器（尤其是 ios safari 和 android chrome）默认禁止视频自动播放，需显式添加 `autoplay` 和 `muted` 属性，并确保视频编码兼容，才能实现无交互触发的播放效果。
在移动端网页中，MP4 视频“不工作”——表现为点击后无响应、仅显示海报图（poster）却不播放——并非代码逻辑错误，而是受现代移动浏览器严格的自动播放策略（Autoplay Policy）限制。根据 Apple 和 Google 的规范，未经用户手势（如 click/tap）触发的 <video></video> 元素，若包含音频轨道，则不允许自动播放；即使通过 JS 调用 .play()，也会因未满足静音条件而被拒绝。
因此，仅添加 autoplay 属性（如答案中所提）在多数真实移动设备上仍会失效——关键缺失的是 muted 属性。正确写法如下：
<video id="video" class="video" autoplay muted loop poster="assets/img/постеры к подкастам/IMG_8742.JPG" src="assets/video/сладко.mp4" tabindex="0"> <!-- 建议提供备用格式，增强兼容性 --> <source src="assets/video/сладко.webm" type="video/webm"> </video>
✅ 必须同时满足以下三点，移动端才可能自动播放：
-
autoplay：声明自动播放意图； -
muted：强制静音（这是 iOS Safari 和新版 Android Chrome 的硬性要求）； -
loop（可选但推荐）：避免播放结束时退回到 poster 状态，保持视觉连续性。
⚠️ 注意事项：
-
不要依赖
:focus模拟全屏播放：移动端tabindex+:focus的 CSS 全屏方案不可靠，因触摸设备通常不触发focus（尤其无input或button语义时），且:focus不等同于播放控制。 -
JS 播放需绑定用户手势：若需点击 poster 后播放，应将
video.play()放在click事件回调中（你当前 JS 已基本正确），但必须确保该事件是直接由用户触发的同步操作（不能异步延迟或封装在 Promise 中）。 -
视频编码建议：使用 H.264 编码（Baseline 或 Main Profile）、AAC 音频，容器为 MP4（
.mp4），分辨率适配移动端（如 720p 以内），以保证广泛兼容性。可用 FFmpeg 命令优化：ffmpeg -i input.mp4 -vcodec libx264 -profile:v baseline -level 3.0 -acodec aac -movflags +faststart output.mp4
-
降级处理：为不支持自动播放的环境（如部分微信内置浏览器），建议保留 poster 图片，并通过 JS 监听
play/error事件提供反馈：video.addEventListener('play', () => console.log('Video started')); video.addEventListener('error', () => { console.warn('Video failed to play — fallback to poster'); video.style.display = 'none'; });
总结：移动端视频播放的核心不是“加属性”，而是尊重平台策略——用 muted 换取自动播放权限，用 loop 维持体验，用语义化交互（而非 CSS focus）保障控制权。忽略 muted，autoplay 在移动设备上几乎形同虚设。
