移动端全屏视频常因自动播放策略限制而显示为空白，需添加 muted、playsinline、autoplay 等属性并配合 javascript 控制播放逻辑，才能确保兼容 ios 和 android。
移动端全屏视频常因自动播放策略限制而显示为空白，需添加 muted、playsinline、autoplay 等属性并配合 javascript 控制播放逻辑，才能确保兼容 ios 和 android。
在现代 Web 开发中，使用 <video> 元素作为全屏背景（如首页首屏视觉层）非常常见。然而，该方案在桌面端运行良好，却在真实移动设备（尤其是 iOS Safari 和部分 Android 浏览器）上频繁出现「白屏」或「黑屏不播放」问题——根本原因在于移动端浏览器对自动播放（autoplay）的严格限制：未静音的视频默认被禁止自动播放，且部分浏览器要求视频必须「内联播放」（playsinline），而非强制全屏。
要彻底解决该问题，需同时满足以下核心条件：
✅ 强制静音（muted）：绕过音频权限拦截；
✅ 启用内联播放（playsinline）：防止 iOS Safari 自动跳转全屏模式（该行为会中断页面布局流）；
✅ 显式声明 autoplay：明确告知浏览器意图；
✅ 设置 preload="auto"：提升媒体资源预加载概率；
✅ 通过 JS 主动触发播放：利用 oncanplay 事件确保媒体就绪后调用 .play()；
✅ 处理循环与恢复逻辑：监听 onended 并重新播放，避免因网络抖动或解码异常导致中断。
以下是完整、经过实测的解决方案代码：
<div id="holderDiv">
<video
id="video2"
class="background-video"
autoplay
muted
playsinline
preload="auto"
loop
onloadedmetadata="this.muted = true"
oncanplay="playVideo(this)"
onended="playVideo(this)">
<source src="https://download.samplelib.com/mp4/sample-5s.mp4#t=0.1" type="video/mp4" />
</video>
</div>#holderDiv {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
pointer-events: none;
user-select: none;
}
.background-video {
position: absolute;
top: 0; left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: 1500;
}function playVideo(el) {
if (el.readyState >= el.HAVE_ENOUGH_DATA) {
el.play().catch(err => {
console.warn("Video autoplay prevented:", err.message);
// 可选：降级提示或 fallback 图片
document.getElementById('holderDiv').style.background = '#000';
});
}
}
// 防止 iOS Safari 在 orientation change 后暂停视频
window.addEventListener('orientationchange', () => {
const video = document.getElementById('video2');
if (video && !video.paused && video.currentTime > 0) {
video.play().catch(() => {});
}
});⚠️ 关键注意事项：
- 不要依赖 autoplay 单一属性：iOS 10+ 和 Chrome for Android 均要求 muted + playsinline 组合才允许静音自动播放；
- onloadedmetadata 中再次设 muted = true 是为防某些浏览器重置静音状态；
- #t=0.1（URL 片段）用于跳过可能的首帧黑帧，提升首帧渲染稳定性；
- 若视频源跨域，请确保服务端返回 Access-Control-Allow-Origin: *，否则 play() 可能因 CORS 拒绝而失败；
- 建议为视频提供 poster 图片或加载占位符，提升无媒体支持设备或加载失败时的用户体验。
通过以上配置，即可在 iOS（Safari/iPhone）、Android（Chrome/Samsung Browser）等主流移动端环境稳定呈现全屏背景视频，兼顾性能、兼容性与用户体验。
