IOS设备中HTML Video自动全屏弹窗问题求助

以下是针对你遇到问题的具体修复步骤：

• 修正React属性名：原生HTML的playsinline属性在React中对应的驼峰命名是playInline（单数play，而非plays），你当前写的playsInline无法被React正确映射为原生属性，这是部分iOS设备触发全屏的核心原因之一。

• 添加webkit前缀兼容：为覆盖旧版本iOS或特殊机型的兼容问题，同时添加webkitPlaysInline属性，确保属性能被WebKit内核正确识别。

• 检查视频编码兼容性：确认视频采用H.264编码（iOS原生支持的主流编码），避免使用AV1等iOS兼容性较差的编码，编码不兼容可能触发系统默认的全屏播放逻辑。

• 手动控制播放时机：部分iOS设备对自动播放时机有严格限制，建议通过组件ref手动触发播放，避免页面加载时过早触发自动播放导致异常：

import { useRef, useEffect } from 'react';

export default function OurStoryVideo() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      // 尝试手动触发播放，捕获可能的错误
      video.play().catch(error => {
        console.error('视频播放失败:', error);
      });
    }
  }, []);

  return (
    <video
      ref={videoRef}
      src='/assets/videos/Our-Story.mp4'
      className='ourstory-video'
      muted
      loop
      playInline
      webkitPlaysInline
    />
  );
}

• 确认容器样式无冲突：检查视频容器ourstory-video的CSS样式，确保没有设置position: fixed、width: 100vw等可能被系统判定为全屏的样式，保证视频在容器内正常渲染。

测试时建议使用真实iOS设备，模拟器的视频播放行为可能与真机存在差异。

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