HTML5 video嵌入的H.264视频移动端浏览器无法播放如何解决

移动端和桌面端浏览器的视频解码逻辑、加载策略、兼容要求存在差异，具体触发原因集中在4类：

• 视频编码参数不兼容：桌面端H.264解码器容错性极强，支持10bit色深、High 4:4:4 Profile、高Level等级的H.264视频，但移动端普遍依赖硬件解码，仅支持8bit YUV420P采样、Main/High Profile @ L3.1及以下规格的H.264视频，超出规格的文件直接无法解码，表现为控件空白。
• MP4元数据位置错误：如果MP4文件的moov元数据块（存储视频分辨率、时长、轨道信息的核心数据）放在文件末尾，移动端浏览器为节省流量，初始仅请求文件开头的小部分数据，找不到元数据就会直接终止加载，不会拉取完整文件；桌面端浏览器会持续拉取数据直到找到元数据，所以能正常播放。
• 服务器配置不符合移动端加载规则：移动端加载视频默认使用HTTP Range分段请求，要求服务器返回206 Partial Content状态码支持分片拉取，如果服务器不支持Range请求、或者MP4文件的Content-Type响应头配置错误（比如设为application/octet-stream），移动端会直接判定资源无效，拒绝加载。
• video标签缺失移动端必需属性：iOS端Safari、iOS版Chrome默认要求视频添加内联播放属性，没有该属性的视频不会在内联位置加载，部分版本直接显示空白控件；另外示例代码里的空src属性也会导致加载失败，桌面端能播放是实际运行环境替换了有效src，但漏了兼容属性。

按以下顺序排查调整即可：

1. 重新转码视频适配移动端规格
   用ffmpeg转码时直接加适配参数，一次性解决编码兼容和元数据前置问题，命令如下：

   ffmpeg -i 原视频路径.mp4 -c:v libx264 -profile:v main -level 3.1 -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart 输出移动端适配视频.mp4
   

   其中-movflags +faststart就是把moov元数据移到文件开头的参数，转完的文件不需要等全部下载完就能开始播放，兼容所有移动端解码要求。
2. 补全video标签的兼容属性
   替换为以下代码，把src换成实际视频地址：

   <video controls playsinline webkit-playsinline preload="metadata" style="width:100%">
     <source src="实际视频访问地址.mp4" type="video/mp4">
   </video>
   

   其中playsinline、webkit-playsinline是iOS端必需的内联播放属性，preload="metadata"告诉浏览器初始仅加载元数据，符合移动端流量控制逻辑，避免被浏览器拦截预加载。
3. 调整服务器配置
   • 给.mp4后缀的文件配置正确的Content-Type响应头：video/mp4
   • 开启服务器的Range请求支持，确保视频资源请求可以返回206状态码，支持分段拉取
   • 如果视频存储在第三方域名下，给视频资源配置CORS跨域响应头，移动端跨域拦截规则比桌面端严格，未配置跨域会直接拦截资源加载。

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