iOS 16中HTML Video playsinline loop无法无缝循环的问题求助

问题描述 #

网站使用已编辑为无缝循环效果的视频作为背景，桌面端运行完全正常，但iOS设备打开时，视频每次循环前会出现短暂延迟。核心代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Welcome</title>
        <link rel="stylesheet" href="./assets/css/resetNew.css" />
        <link rel="stylesheet" href="./assets/css/globals.css" />
        <link rel="stylesheet" href="./assets/css/style.css" />
        <link rel="stylesheet" href="./assets/css/welcome.css" />
        
    </head>
    <body>
        <section class="welcome-section" >
            
            <video
                src="./assets/video/hero.mp4"
                class="welcome-section__video"
                playsinline
                autoplay
                muted
                preload="auto"
                loop
            >
                <source type="video/mp4" src="./assets/video/hero.mp4"/>
                <source type="video/webm" src="./assets/video/hero.webm" />
            </video>
        </section>
    </body>
</html>

CSS代码 #

.welcome-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    position: relative;
    overflow-y: hidden;
}

.welcome-section__video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

可行解决方案 #

1. 双视频无缝切换方案 #

iOS原生loop属性循环时存在加载间隙，通过两个视频元素交替播放可彻底规避该问题：

<section class="welcome-section">
  <video class="welcome-section__video active" playsinline autoplay muted preload="auto">
    <source type="video/mp4" src="./assets/video/hero.mp4">
  </video>
  <video class="welcome-section__video" playsinline muted preload="auto">
    <source type="video/mp4" src="./assets/video/hero.mp4">
  </video>
</section>

.welcome-section__video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.1s linear;
}
.welcome-section__video.active {
  opacity: 1;
}

const videos = document.querySelectorAll('.welcome-section__video');
let activeIndex = 0;

videos.forEach((video, index) => {
  video.addEventListener('timeupdate', () => {
    // 视频播放到接近结尾时切换到备用视频
    if (video.currentTime >= video.duration - 0.5) {
      videos[activeIndex].classList.remove('active');
      activeIndex = (activeIndex + 1) % videos.length;
      videos[activeIndex].currentTime = 0;
      videos[activeIndex].play();
      videos[activeIndex].classList.add('active');
    }
  });
});

2. 优化视频编码参数 #

iOS对视频编码兼容性要求严格，使用FFmpeg重新编码，适配iOS播放逻辑：

ffmpeg -i input.mp4 -c:v libx264 -profile:v main -level:v 3.1 -pix_fmt yuv420p -crf 23 -g 30 -movflags +faststart output.mp4

• -profile:v main: 选用iOS支持更稳定的Main编码 profile
• -movflags +faststart: 将视频元数据移至文件头部，加快加载速度
• -g 30: 控制关键帧间隔，确保首尾帧衔接无断层
• 需确保视频首尾帧像素完全一致，避免切换时的视觉跳变

3. 手动控制循环逻辑 #

移除原生loop属性，通过JS监听播放进度，手动跳转至开头：

const video = document.querySelector('.welcome-section__video');
video.removeAttribute('loop');

video.addEventListener('timeupdate', () => {
  if (video.currentTime >= video.duration - 0.3) {
    video.currentTime = 0;
    video.play();
  }
});

结论 #

该问题并非完全无法干预的iOS系统限制，双视频切换方案兼容性和效果最优，可彻底解决循环延迟；优化视频编码则从根源降低加载解析耗时，建议两者结合使用。

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