iOS端Safari嵌入HTML MP4视频无法播放及预览帧失效问题咨询

Failed to load resource: Plug-in handled load 报错含义 #

该报错为iOS WebKit内核专属错误，苹果要求iOS上所有浏览器（包括Chrome等第三方浏览器）必须使用WebKit内核，当内核无法正确解析媒体资源元数据、或服务端不满足iOS的媒体加载规则时就会抛出该错误。

1. 调整FFmpeg转码参数 #

你从WebM转码MP4的操作大概率未将MP4的元数据moov box放在文件头部，iOS加载媒体时需要先读取moov box获取时长、编码等信息，长视频如果moov在文件尾部，iOS不会等待全文件加载完成，就会判定时长为0、加载失败。
转码时添加-movflags +faststart参数即可将moov box移动到文件头部，示例转码命令：

ffmpeg -i 输入文件.webm -c:v libx264 -c:a aac -movflags +faststart 输出文件.mp4

注意必须使用H.264编码视频、AAC编码音频，iOS对其他编码格式兼容性极差。

2. 配置服务端支持Range请求 #

iOS加载媒体时会先发送Range: bytes=0-1的试探请求，要求服务端返回206 Partial Content状态码，同时携带正确的响应头：

• Accept-Ranges: bytes
• Content-Range: bytes 0-1/文件总大小
• Content-Length: 2（对应请求的字节段长度）
• Content-Type: video/mp4

如果是用PHP做流式输出，必须自行实现Range请求的处理逻辑，不能直接返回全文件内容。如果使用CDN存储视频，需要在CDN后台开启Range回源配置，避免CDN拦截Range请求返回200状态码。

iOS Safari对URL后缀的#t时间戳参数兼容性很差，不要依赖该参数实现预览帧，推荐两种通用方案：

• 转码时同步导出视频第一帧作为封面图，给video标签添加poster属性指定封面图地址，兼容性最好：

  <video controls playsinline preload="metadata" poster="https://example.com/视频封面.jpg">
    <source type="video/mp4" src="https://example.com/video.mp4">
  </video>
  

• 不想单独存储封面图的话，可以在前端监听video的loadedmetadata事件，手动触发seek到0.1秒位置，再通过canvas截取当前帧作为poster使用。

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