HTML网页中video标签嵌入视频无法正常显示问题咨询

你当前使用的video标签代码如下：

<video height="369px" width="610px" class="detailVideo" src="/assets/video/bjp__video.mp4"></video>

常见问题排查步骤 #

• 路径有效性排查
  你使用的是站点根目录绝对路径，首先确认站点根目录下是否存在/assets/video/bjp__video.mp4文件，注意Linux服务器对文件名大小写敏感，需确认文件名大小写和路径完全匹配。你可以直接在浏览器地址栏输入域名 + /assets/video/bjp__video.mp4，如果无法直接播放，说明文件不存在或路径错误。
• video标签属性缺失排查
  你当前的标签未添加controls属性，没有该属性的视频默认不会显示播放控件，即使视频加载成功页面上也看不到可播放的视频组件。如果需要自动播放，还需要额外添加muted属性（现代浏览器要求自动播放视频必须静音，否则会被拦截）。
  修复后的参考代码：

  <!-- 带播放控件的视频 -->
  <video height="369px" width="610px" class="detailVideo" src="/assets/video/bjp__video.mp4" controls></video>
  
  <!-- 自动静音循环播放的视频 -->
  <video height="369px" width="610px" class="detailVideo" src="/assets/video/bjp__video.mp4" autoplay muted loop></video>
  

• 视频文件本身排查
  确认本地可以正常打开该mp4文件，且视频编码为H.264，其他编码格式的mp4可能无法被浏览器兼容。如果文件损坏或编码不符，重新导出为H.264编码的mp4文件即可。
• 服务器配置排查
  打开浏览器F12开发者工具的「网络」面板，刷新页面后找到视频文件的请求，查看响应头的Content-Type是否为video/mp4，如果是其他值，需要在服务器配置中添加mp4对应的MIME类型。
• 报错与样式排查
  查看F12开发者工具的「控制台」面板是否有报错：404对应路径错误、403对应文件无访问权限、CORS错误对应跨域限制。同时可以在「元素」面板选中video标签，确认是否有自定义CSS（比如detailVideo类）导致视频被隐藏、宽高为0或者被其他元素遮挡。

相关截图 #

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