HTML5页面video标签视频在Safari浏览器无法显示播放问题

问题修复方案 #

1. 调整JS触发逻辑

你当前的JS代码中重复触发load()反而会打断Safari的默认自动播放逻辑，且document.ready时机在Safari中不一定能正确获取视频加载状态，修改为以下代码：

$(document).ready(function(){
    var herovide = document.getElementById('globe');
    // 优先使用浏览器原生自动播放，兜底监听可播放事件触发
    herovide.addEventListener('canplay', function() {
        herovide.play().catch(function() {
            // 自动播放被拦截时，监听用户首次交互触发播放
            document.addEventListener('touchstart click', function() {
                herovide.play();
            }, { once: true });
        });
    });
});

2. 确认视频编码符合Safari要求

Safari对MP4格式的兼容性要求非常严格：

• 视频编码必须为 H.264，不支持H.265/HEVC硬解外的其他编码格式
• 音频轨道必须为AAC编码，如果你当前视频没有音频轨道也建议添加一段静音的AAC音轨，避免Safari识别异常

3. 调整video标签属性

将preload属性从metadata改为auto，同时确认所有自动播放必要属性都正确声明：

<video autoplay loop muted playsinline id="globe" preload="auto">
    <source src="assets/images/earth.mp4" type="video/mp4; codecs=avc1.4D401E, mp4a.40.2" />
</video>

在type属性中明确声明编码信息，可帮助Safari快速识别视频格式。

4. 确认服务端支持Range请求

Safari加载视频时默认发送分片请求，要求服务端支持206 Partial Content响应，如果你的静态资源服务端未开启Range请求支持，会导致视频加载失败。可以通过开发者工具查看视频请求的响应状态码，如果返回的是200而非206，需要调整服务端配置，开启静态资源的分片请求支持。

内容的提问来源于stack exchange，提问作者Hiren Devganiya