React Video移动端浏览器无法播放及自动全屏问题求助

1. 调整HTML视频标签属性 #

首先给视频标签添加playsinline和webkit-playsinline属性，这是阻止移动端Safari自动全屏的核心，同时确保基础属性配置正确：

<video autoplay muted loop playsinline webkit-playsinline poster="视频占位图地址">
  <source src="https://sdfasdfsdaf" type="video/webm">
  <!-- 建议补充MP4格式源，提升跨端兼容性 -->
  <source src="你的视频MP4地址" type="video/mp4">
</video>

• playsinline/webkit-playsinline：强制视频在页面内播放，避免触发Safari自动全屏
• poster：视频加载完成前显示的占位图，优化视觉体验
• 补充MP4源：WebM在部分移动端设备支持有限，MP4是兼容性更优的视频格式

2. CSS设置背景视频样式 #

通过CSS将视频固定为容器背景，保证铺满且不破坏画面比例：

/* 假设视频父容器为.page-container，可根据实际结构调整 */
.page-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh; /* 或自定义高度 */
}

.page-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -1; /* 将视频置于页面内容下方 */
  object-fit: cover; /* 保持视频比例，铺满容器 */
}

3. Safari自动播放兼容处理 #

部分旧版Safari即使满足静音条件，自动播放仍可能失效，可通过JS触发播放：

document.addEventListener('DOMContentLoaded', function() {
  const bgVideo = document.querySelector('video');
  if (bgVideo) {
    bgVideo.play().catch(err => {
      // 若自动播放失败，在用户首次触摸屏幕时触发播放
      document.addEventListener('touchstart', function playVideo() {
        bgVideo.play();
        document.removeEventListener('touchstart', playVideo);
      }, { once: true });
    });
  }
});

关键注意事项 #

• 压缩视频体积：过大的视频会导致加载缓慢，影响页面体验
• 多版本iOS测试：部分旧版Safari需要webkit-前缀才能识别playsinline属性
• 必须保持静音：移动端浏览器几乎都要求视频静音才能触发自动播放

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