Chrome运行最简HTML示例时video标签不显示且控制台无报错如何解决

• <video>标签未闭合：你代码中的<video id="video" class="scare" loop="" src="video.mp4">没有对应的</video>闭合标签，Chrome解析标签异常会导致视频无法正常渲染。
• 缺失必要属性：默认情况下video标签不带controls属性就不会显示播放控件，如果你没有通过JS触发播放，视觉上就会呈现为无内容的状态。
• 浏览器自动播放策略限制：Chrome高版本禁止未触发用户交互的带音频视频自动播放，如果你在JS里写了自动播放逻辑但没有加muted静音属性，播放请求会被浏览器拦截，且不会抛出明显报错。
• 遮罩层遮挡：你页面上有overlay类的全屏遮罩层，如果该元素CSS设置了高于video的z-index，会直接遮挡住下方的视频区域。
• 资源路径或编码问题：src="video.mp4"是相对路径，需要确认视频文件和当前HTML文件处于同级目录；另外如果你的MP4视频使用了Chrome不支持的编码格式，也会出现加载无响应的情况。

• 首先修正video标签语法，补充闭合标签，按需添加controls播放控件属性、muted静音属性：

<video id="video" class="scare" loop src="video.mp4" controls muted>
</video>

• 确认视频资源路径：将video.mp4放在和当前HTML文件同级的目录下，或者修改为正确的相对/绝对路径。
• 检查CSS样式：打开Chrome开发者工具的元素面板，选中video元素确认宽高是否正常、是否在视口范围内，同时查看overlay元素的z-index值，调整到低于video的层级即可。
• 转码适配：如果是编码不兼容问题，将视频转码为H.264编码的MP4格式即可适配Chrome浏览器。
• 调整播放逻辑：如果需要带音频播放，将视频播放的触发逻辑写在Yes/No按钮的点击事件回调中，符合浏览器的用户交互触发播放规则。

内容的提问来源于stack exchange，提问作者Khang Tèo