React中如何阻止Safari浏览器内视频自动全屏播放？

你遇到的问题核心是播放控制属性加错了位置——把playsInline、autoPlay这些属性放在了<source>标签上，而Safari只会识别<video>标签上的播放控制属性，<source>仅负责指定视频源信息。

按以下步骤修改即可解决：

1. 把所有播放控制属性移到<video>标签上，<source>只保留type和src
2. 显式添加Safari专属的全屏控制属性，同时确保关闭控制栏和画中画功能

修正后的React代码示例：

<video
  autoPlay
  muted
  loop
  playsInline
  webkit-playsinline="true"
  controls={false}
  disablePictureInPicture
  webkit-disablePictureInPicture
>
  <source
    type="video/mp4"
    src={mainVideo}
  />
</video>

额外注意事项：

• 确保你的MP4视频是H.264编码，这是Safari原生支持的编码格式，编码不兼容也可能触发异常播放行为
• 检查视频元素的CSS样式，不要设置过大的宽高（比如占满视口），避免Safari误判为需要全屏播放的媒体内容
• 如果还是有问题，可以尝试添加preload="auto"属性，让视频提前加载资源，减少播放时的异常触发

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