HTML5 VIDEO在iPhone及iOS设备无法播放，请求排查代码问题

先梳理你代码里的核心问题，逐个修复就能解决iOS播放异常：

1. 修正视频格式与type属性不匹配的错误 #

你的视频文件是.mp4，但source标签的type写的是video/webm——iPhone不支持WebM格式，且格式与属性不匹配会直接导致视频无法识别。改成对应MP4的type值，同时确保视频是H.264编码（iOS仅支持该编码的MP4）：

<div class="video-container">
    <video class="video-bg" autoplay loop muted playsinline>
        <source src="./Media/Blue Liquid Art Design Gallery Intro Video.mp4" type="video/mp4" alt="HTML5 background video">
    </video>
</div>

注：HTML5布尔属性如autoplay不需要写autoplay="autoplay"，直接写属性名即可

2. 确保视频符合iOS播放标准 #

• 视频编码必须是H.264 Baseline/Main/High Profile，音频用AAC-LC编码
• 分辨率建议控制在1080p以内，过高分辨率可能导致iOS加载失败
• 压缩视频文件大小，避免因体积过大超时无法加载

3. 补充CSS适配避免显示异常 #

给容器和视频添加基础样式，保证视频铺满Hero区域且不被截断：

.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

4. 处理iOS严格的自动播放限制 #

iOS对自动播放有硬性要求，即便加了muted和playsinline仍可能失败，可通过JS兜底：

document.addEventListener('DOMContentLoaded', function() {
    const video = document.querySelector('.video-bg');
    // 尝试自动播放，失败则在用户首次触摸时触发
    video.play().catch(() => {
        document.addEventListener('touchstart', function playVideo() {
            video.play();
            document.removeEventListener('touchstart', playVideo);
        }, { once: true });
    });
});

内容的提问来源于stack exchange，提问作者Aakash Mishra