You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

iPhone端HTML5 Video无法自动播放,求解决方案

解决iPhone上<video>标签无法自动播放的问题

我之前也碰到过这个问题,iPhone的Safari对视频自动播放的限制确实比桌面端严格不少,结合你的代码,给你几个关键的解决办法:

  • 必须添加playsinline属性:这是iPhone Safari允许视频在页面内而非强制全屏播放的核心属性。iOS系统默认会让视频全屏播放,没有这个属性的话,即使你设置了autoplaymuted,也大概率无法触发自动播放。
  • 确认视频编码符合Safari要求:Safari对MP4视频的编码有明确要求,需要是H.264 Baseline/Main/High Profile编码,音频部分要用AAC-LC格式。如果你的视频编码不符合标准,即使属性都加对了,也可能无法正常加载播放。
  • 检查是否有其他脚本干扰:如果页面里有其他JavaScript代码修改了视频的静音状态、播放状态,或者动态操作了视频元素,可能会打断自动播放逻辑。可以暂时移除其他脚本测试,排除干扰。

修改后的代码示例:

<video autoplay muted playsinline>
  <source src="midia/video.mp4" type="video/mp4">
  <source src="midia/video.webm" type="video/webm">
</video>

另外补充一点:如果你的视频是动态添加到页面中的(不是初始DOM就存在),除了上述属性,可能还需要在视频元素加载完成后手动调用video.play()方法,不过因为你设置了muted,这个操作不需要依赖用户交互就能执行。

内容的提问来源于stack exchange,提问作者Manzoor

火山引擎 最新活动