iOS移动端Safari中HTML video标签音频无法播放问题排查

1. iOS媒体播放的交互限制 #

iOS Safari有严格的规则：非静音视频必须由用户主动触发播放。你的代码仅通过点击事件修改muted属性，但未调用play()方法——即使解除静音，视频仍处于“被动播放”状态，音频无法被激活。

2. 视频编码不兼容 #

iOS Safari仅支持特定编码的MP4：视频需为H.264（基线/主/高级profile），音频需为AAC-LC编码。如果你的video.mp4不符合标准，音频会无法解码。可以用FFmpeg检查编码信息：

ffmpeg -i video.mp4

确认输出中音频流为aac，视频流为h264。

3. JS事件绑定与元素选择问题 #

• 若页面存在多个video元素，$('video')会选中所有元素，可能干扰目标视频；建议用ID精准选择：$('#vid')[0]
• 需确保事件绑定在DOM加载完成后执行，否则选择器可能找不到对应元素。优化后的代码示例：

document.addEventListener('DOMContentLoaded', function() {
    $('.video .icon .on').click(function(){
        const video = $('#vid')[0];
        video.muted = true;
    })

    $('.video .icon .off').click(function(){
        const video = $('#vid')[0];
        video.muted = false;
        video.play(); // 关键：解除静音后主动触发播放
    })
})

4. 初始muted属性的遗留影响 #

你的video标签默认设置了muted，iOS会将其标记为“静音播放状态”。仅修改muted属性无法自动恢复音频，必须通过用户交互（如点击事件）配合play()方法，才能激活音频通道。

5. 资源路径错误 #

检查image/video.mp4的相对路径是否正确，iOS Safari对路径解析的规则可能与桌面端不同。可通过Safari开发者工具的网络面板，确认视频资源是否成功加载（状态码为200）。

内容的提问来源于stack exchange，提问作者Alp Selvi