HTML编写网页嵌入MP4视频在Chrome浏览器中无法播放怎么办

排查解决步骤 #

• 确认文件路径正确性
  先核对你的项目目录结构，确保和下面的结构一致：

  项目根目录
  ├─ 你的html文件（比如index.html）
  └─ videos文件夹
     └─ bodybuild.mp4
  

  如果你的html文件存放在根目录下的子文件夹中，需要调整相对路径，比如html在src文件夹下，src属性就要改为../videos/bodybuild.mp4。
• 检查文件名大小写
  Windows系统不区分文件名大小写，但Mac、Linux系统以及大多数线上服务器都会区分，需要确认videos文件夹名、bodybuild.mp4文件名的大小写和代码中写的完全一致，包括后缀.mp4是否为大写的.MP4。
• 检查视频编码兼容性
  后缀为mp4的文件不一定都能被浏览器识别，浏览器仅支持H.264编码的MP4视频。你可以将视频用转码工具重新转码为H.264编码的MP4格式后再测试。
• 调整代码写法测试
  你可以直接把视频路径写在video标签的src属性中，跳过source标签，排查标签写法问题：

  <html>
  <head>
  <title>Video_page_test</title>
  </head>
  <body>
  <video src="videos/bodybuild.mp4" controls></video>
  </body>
  </html>
  

• 避免本地文件协议限制
  如果你是直接双击打开html文件，地址栏为file://开头的路径，部分浏览器的安全策略会阻止加载本地视频文件。你可以安装VS Code的Live Server插件，右键html文件选择「Open with Live Server」，通过本地http服务打开网页测试。

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