iOS移动端<video>标签无法自动播放视频问题求助

问题背景 #

首页用<video>作为横幅，设置了自动播放、静音、循环、inline播放，桌面端及安卓移动端均正常，唯独iOS移动端完全无法显示视频。

现有代码 #

React 组件代码

<main className={styles["main"]}>
        <video
          autoPlay={true}
          muted={true}
          loop={true}
          playsInline={true}
          className={styles["main-video"]}
        >
          <source src="path-to-my-video.webm" type="video/webm" />
        </video>
</main>

SCSS 样式代码

.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 15em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-position: center;
  &-video {
    z-index: 0;
    background-size: cover;
    position: absolute;
    top: 0px;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

解决步骤 #

• 添加iOS兼容的视频格式：iOS Safari不支持WebM格式，必须补充H.264编码的MP4视频源，这是iOS能识别的核心格式。
• 强化inline播放属性：虽然已设置playsInline={true}，但部分iOS旧版本需要兼容webkit-playsinline属性，建议同时添加。
• 修复视频元素样式：当前样式的min-width/min-height可能导致视频在iOS上布局异常，改用width:100%;height:100%配合object-fit:cover确保视频铺满容器，同时补充left:0让视频定位完整。
• 兜底手动触发播放：iOS的自动播放策略可能存在偶发限制，可在组件挂载后手动调用播放方法。

修改后的代码示例 #

React 组件代码

import { useEffect, useRef } from 'react';

// ...

const videoRef = useRef(null);

useEffect(() => {
  const video = videoRef.current;
  if (video) {
    // 手动触发播放，兼容iOS的自动播放限制
    video.play().catch(err => console.log('播放触发失败:', err));
  }
}, []);

return (
  <main className={styles["main"]}>
    <video
      ref={videoRef}
      autoPlay={true}
      muted={true}
      loop={true}
      playsInline={true}
      webkitPlaysInline={true} // 兼容iOS旧版本
      className={styles["main-video"]}
    >
      <source src="path-to-my-video.mp4" type="video/mp4" />
      <source src="path-to-my-video.webm" type="video/webm" />
    </video>
  </main>
);

修改后的SCSS样式

.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 15em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-position: center;
  &-video {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0; // 补充left定位
    width: 100%;
    height: 100%;
    object-fit: cover; // 确保视频铺满容器且比例正确
    background-color: rgba(0, 0, 0, 0.5);
  }
}

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