移动端全屏视频Div无法显示问题求助

问题描述 #

代码在桌面端及Chrome开发者工具的移动端模拟模式下运行正常，但真实移动设备加载时显示白屏，相关代码如下：

HTML代码

<div id='holderDiv'>
  <video id="video2" loop muted class='background-video'>
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4#t=o.1" type="video/mp4" />
  </video>
</div>

CSS代码

#holderDiv {
  position: fixed;
  text-align: center;
  top: 0;
  left:0;
  width:100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0);
  z-index: 100;  
  pointer-events: none;
  user-select: none;  
}
.background-video{
  top:0px;
  left:0px;
  height: 100vh;
  position: absolute;
  width:100vw;
  object-fit: cover;
  z-index: 1500;  
}

原因排查及修复方案 #

• 修正URL时间戳格式：视频链接中的#t=o.1是错误写法，应改为#t=0.1（字母o替换为数字0）。移动设备视频播放器对参数格式更敏感，错误参数会导致视频加载失败。

• 补充视频播放必要属性：仅设置muted不足以保证移动设备自动播放，需添加autoplay和playsinline属性——playsinline用于避免视频强制进入全屏模式，适配背景视频场景。修改后的video标签：

<video id="video2" loop muted autoplay playsinline class='background-video'>

• 优化CSS布局适配：
  • 移除#holderDiv的text-align: center，绝对定位的视频不受该属性影响，冗余属性可能引发布局异常；
  • 用100%替代100vw/100vh，避免移动端视口差异导致的尺寸偏差；
  • 给视频添加object-position: center，确保视频在容器内居中显示，配合object-fit: cover提升适配效果。调整后的CSS：

#holderDiv {
  position: fixed;
  top: 0;
  left:0;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,0);
  z-index: 100;  
  pointer-events: none;
  user-select: none;  
}
.background-video{
  top:0;
  left:0;
  height: 100%;
  position: absolute;
  width:100%;
  object-fit: cover;
  object-position: center;
  z-index: 1500;  
}

• 增加视频格式 fallback：虽然MP4是通用格式，但部分移动设备对特定编码的MP4支持有限，可以补充WebM格式的视频源作为备选：

<source src="your-video-file.webm" type="video/webm" />

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