React.js背景视频PC正常但移动端（iPhone）无法播放求助

以下是针对你遇到的问题的几个排查和解决方向：

1. 修正React视频属性的拼写错误 #

React中DOM属性采用小驼峰命名，你代码里的playsInLine拼写错误，应该改为playsInline（第二个字母l小写）。同时，HTML原生布尔属性在React中无需引号赋值，直接声明即可：

<video
  id="video"
  width="100%"
  height="100%"
  autoPlay
  playsInline
  loop
  muted
  style={{
    position: "absolute",
    zIndex: -1,
    opacity: 0.5,
    objectFit: "cover",
  }}
  src={bgv}
  type="video/mp4"
/>

2. 检查视频编码格式 #

iPhone对MP4视频编码有严格要求，必须是H.264编码（Baseline或Main Profile），音频采用AAC编码。如果编码不符合标准，移动端会直接无法加载。可用FFmpeg转码适配：

ffmpeg -i input.mp4 -vcodec libx264 -profile:v baseline -acodec aac output.mp4

3. 添加用户交互触发播放逻辑 #

部分移动端浏览器即使满足muted+autoplay条件，仍需要用户首次交互（触摸、点击）才能启动视频。可添加触摸事件监听：

import { useEffect, useRef } from 'react';

function VideoBackground() {
  const videoRef = useRef(null);

  useEffect(() => {
    const playVideo = () => {
      videoRef.current?.play().catch(err => console.log(err));
    };
    document.addEventListener('touchstart', playVideo, { once: true });
    return () => document.removeEventListener('touchstart', playVideo);
  }, []);

  return (
    <video
      ref={videoRef}
      id="video"
      width="100%"
      height="100%"
      autoPlay
      playsInline
      loop
      muted
      style={{
        position: "absolute",
        zIndex: -1,
        opacity: 0.5,
        objectFit: "cover",
      }}
      src={bgv}
      type="video/mp4"
      poster="/fallback-cover.jpg"
    />
  );
}

4. 确保父容器的定位与尺寸 #

视频用absolute定位时，父容器必须设置position: relative，且要有明确宽高（比如占满视口），否则视频会因没有参照容器而无法显示：

<div style={{
  position: "relative",
  width: "100vw",
  height: "100vh",
  overflow: "hidden"
}}>
  <video {/* ...视频属性... */}></video>
</div>

5. 添加错误处理与备用方案 #

监听视频error事件排查加载失败原因，同时设置poster属性，视频加载失败时显示封面图，避免空白：

<video
  {/* ...其他属性... */}
  poster="/background-cover.jpg"
  onError={(e) => console.log("视频加载失败:", e.target.error)}
/>

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