IOS设备中video标签配置后仍无法自动播放问题排查求助

数据老陈

2026-9-27

iOS设备视频无法自动播放解决方案

现有代码问题排查

错误使用自定义属性video-src替代标准视频地址属性src，浏览器无法识别资源地址导致无法加载
<source>标签冗余添加playsinline/autoplay/muted等控制属性，这类属性仅需在父级<video>标签声明即可
未添加webkit-playsinline属性兼容iOS 11以下老版本设备
未显式校验静音状态与播放触发逻辑，部分iOS Safari版本会默认拦截非用户交互触发的自动播放

修正后的HTML代码

<div class="video-container">
<video id="intro-video" src="https://www.w3schools.com/html/mov_bbb.mp4" poster="" playsinline webkit-playsinline autoplay muted loop>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" width="1600" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" width="900" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" width="480" type="video/mp4">
</video>
</div>

补充兼容JS逻辑

如果修改HTML后仍无法自动播放，添加以下代码做兜底兼容：

window.addEventListener('load', () => {
  const introVideo = document.getElementById('intro-video')
  // 强制设置静音，满足iOS自动播放必要条件
  introVideo.muted = true
  introVideo.load()
  // 尝试主动触发播放
  introVideo.play().catch(() => {
    // 若被浏览器拦截，绑定首次用户触摸事件触发播放
    document.addEventListener('touchstart', () => {
      introVideo.play()
    }, { once: true })
  })
})