HTML <video> 标签未显示视频内容，通常因缺少必要属性、资源路径错误或浏览器策略限制所致；本文详解如何通过修正 src 位置、添加 muted 属性及验证媒体加载状态，快速定位并解决移动端自动播放失败问题。
html `
在 Web 开发中，<video> 标签看似简单，但实际运行时却常因细微配置缺失导致“仅显示海报（poster）却不播放”的问题——尤其在移动设备上更为典型。你提供的代码：
<video playsinline autoplay loop width="100%" height="100%" id="mainVideo"> <source src="1.mp4"> </video>
表面无误，但存在三个关键隐患：
✅ 1. src 应直接写在 <video> 标签上，而非仅依赖 <source>
虽然 <source> 是标准用法，但部分浏览器（尤其是 iOS Safari 和某些 Android WebView）对仅含 <source> 的 <video> 元素自动播放支持不稳定。推荐优先将 src 直接设于 <video> 标签，确保媒体资源被明确识别：
<video playsinline autoplay loop muted width="100%" height="100%" id="mainVideo" src="1.mp4"> </video>
? 注意：muted 属性至关重要！现代浏览器（包括 Chrome、Safari、Firefox）强制要求自动播放（autoplay）的视频必须静音，否则会静默阻止播放。即使你未主动调用 .play()，autoplay 也依赖此策略。
立即学习“前端免费学习笔记（深入）”；
✅ 2. 验证资源路径与 MIME 类型
确保 1.mp4 文件：
- 真实存在于当前 HTML 所在目录（或正确相对/绝对路径）；
- 服务器响应头包含正确的 Content-Type: video/mp4；
- 可通过浏览器直接访问 http://your-domain/1.mp4 下载或播放。
? 小技巧：在 DevTools 的 Network 面板中查看该请求是否返回 200 OK，且 Response Headers 中有 Content-Type: video/mp4。
✅ 3. 补充容错与调试机制
为提升健壮性，建议添加 poster 占位图、错误监听及手动 fallback 控制：
<video playsinline autoplay loop muted width="100%" height="100%" id="mainVideo" src="1.mp4" poster="placeholder.jpg"> <source src="1.webm" type="video/webm"> 您的浏览器不支持视频播放。 </video>
并加入 JS 错误监控：
const video = document.getElementById('mainVideo');
video.addEventListener('error', () => {
console.error('Video failed to load or play:', video.error);
});
video.addEventListener('loadeddata', () => {
console.log('Video loaded and ready to play.');
});⚠️ 特别注意（移动端必查）
- playsinline 必须存在（iOS Safari 默认全屏播放，此属性禁用该行为）；
- 不要依赖用户点击触发 .play() 后再设 autoplay —— 它们是互斥策略；
- 避免使用 height="100%" 而无父容器显式高度（如 body { height: 100vh; }），否则视频区域可能坍缩为 0px。
综上，最简有效修复方案就是：移除 <source>，将 src 写入 <video> 标签，并务必添加 muted。5 小时的排查，往往卡在这一行缺失的属性上。
