iOS移动端HTML video标签无法自动播放问题求助

API 探路者

2026-8-4

iPhone端HTML视频自动播放失效的解决办法

你已经添加了autoplay、muted、playsinline但iPhone端仍无法自动播放，可从以下几点排查：

适配Safari视频编码要求：iPhone的Safari对MP4编码有硬性要求，必须是H.264的Baseline或Main profile，且编码参数需适配移动设备。可使用FFmpeg重新编码，示例命令：
```
ffmpeg -i test-vid.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k optimized-test-vid.mp4
```

添加兼容属性webkit-playsinline：部分旧版iOS Safari仅识别webkit-playsinline，需和标准playsinline同时添加：

<video autoplay loop muted playsinline webkit-playsinline poster="/assets/images/video_poster_2.webp">
    <source src="/assets/videos/test-vid.mp4">
    <source src="/assets/videos/test-vid.webm">
</video>

通过JS兜底触发播放：若视频加载延迟导致自动播放未触发，可监听加载事件手动调用播放：

const video = document.querySelector('video');
video.addEventListener('canplaythrough', () => {
    video.play().catch(e => console.error('播放失败:', e));
});