HTML Video标签仅显示海报无法播放，请求技术排查建议

你的代码如下：

<video playsinline autoplay loop width="100%" height="100%" id="mainVideo">
        <source src="1.mp4">
    </video>

结合你已排除的情况，以下是剩余的常见排查方向：

• 资源路径错误：检查1.mp4的相对/绝对路径是否完全正确。打开浏览器控制台的Network标签，查看该视频资源的请求状态，若返回404、403等错误，说明路径或权限存在问题。
• 自动播放策略限制：部分移动端浏览器（如Safari、微信内置浏览器）对自动播放的要求极为严格，即使添加playsinline，也需要用户主动交互（如点击页面）才能触发播放。可尝试添加点击事件手动调用document.getElementById('mainVideo').play()测试。
• 未指定MIME类型：<source>标签未声明type="video/mp4"，部分浏览器可能无法正确识别视频格式，明确指定MIME类型可避免格式猜测错误。
• CSS/JS干扰：检查是否有CSS将video元素设置为display: none、opacity: 0等隐藏状态；或存在JS代码监听play事件并调用preventDefault()，修改视频paused属性等阻止播放的逻辑。
• 跨域资源限制：若视频来自其他域名，需确认服务器配置了CORS响应头，否则浏览器会阻止视频加载播放，即使Network显示资源加载成功也无法正常播放。
• 视频尺寸兼容性问题：极少数情况下，视频分辨率过大或尺寸比例与容器设置不匹配，可能导致浏览器无法渲染播放，可尝试给video设置固定尺寸（如width: 300px; height: 200px）测试。

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