跨设备 h264 兼容 html5 视频答案

【问题标题】：Cross device h264 compatible html5 video跨设备 h264 兼容 html5 视频
【发布时间】：2021-06-24 08:53:41
【问题描述】：

我正在尝试提供由一系列图像生成的大型延时摄影视频。
使用 FFmpeg，我将视频编码为 h264 mp4。

ffmpeg -framerate 24 -i "/app/download/%d.jpeg" -c:v libx264 -crf 23 -preset fast -tune animation -report -vf "format=yuv420p" -y /app/output.mp4

我遇到了兼容性问题，视频无法在 iOS（Safari）和 Windows（除 chrome 之外的所有浏览器）上播放。我收到以下错误的地方：

Error Code: NS_ERROR_DOM_MEDIA_FATAL_ERR (0x806e0005) Details: mozilla::MediaResult __cdecl mozilla::WMFVideoMFTManager::ValidateVideoInfo(void): Can't decode H.264 stream because its resolution is out of the maximum limitation

在此处查看完整的 FFmpeg 日志：https://pastebin.com/QUEPh3q2

我只是在寻找有关如何对我的媒体进行编码以获得最大兼容性同时仍保持高质量和分辨率的一些资源或知识。

问题：
我应该在 FFmpeg 中使用哪些选项以最大限度地提高兼容性？

【问题讨论】：

添加 -report 并重新运行以生成日志并共享。
您的视频分辨率是否大于支持的宽度 x 高度 8192 x 4320 像素？您是否使用特定/特殊硬件来展示大型视频（例如： 一些具有最新 GPU 硬件等的展览计算机）？我问是因为如果这只是针对网站访问者，那么还要记住不是每个人的设备或网络连接都可以处理 8K+ 大小的视频。
@Gyan pastebin.com/QUEPh3q2 我无法附上完整的报告，所以我在这里上传了
@VC.One 我的视频最大尺寸为 4056 × 3040 或 3040x4056 。它适用于我正在构建的产品，因此通常不可用。我确实期待某些现代计算机。我只是希望我能最大限度地提高兼容性

标签： ffmpeg html5-video h.264

【解决方案1】：

来自 cmets：“我的视频最大尺寸为 4056x3040 或 3040x4056”。

我没有 Apple 设备，但您可能在 Windows 上遇到了一些图像大小限制。
Firefox 使用built-in Windows H264 decoder，其中最大高度为2304。

替换旧命令：

ffmpeg -framerate 24 -i "/app/download/%d.jpeg" -c:v libx264 -crf 23 -preset fast -tune animation -report -vf "format=yuv420p" -y /app/output.mp4

有了这个新的：

ffmpeg -framerate 24 -i "/app/download/%d.jpeg" -vf scale=3069:2300,setsar=1:1 -c:v libx264 -pix_fmt yuv420p -profile:v high -crf 23 -preset fast -movflags +faststart -report -y /app/output.mp4

上述命令将尺寸更改为 3069x2300（在 Windows 分辨率限制内），但我建议使用较小的尺寸，例如 1441x1080，以获得最大的设备/操作系统/浏览器兼容性。 p>

我会省略 -tune animation，如果删除它会影响您的特定图像质量，请将其添加回来。

现在添加了+faststart，它允许 MP4 标头位于文件的前面（通常放在后面），这意味着无需先下载所有视频就可以开始播放，只是为了达到标头数据（其中包含需要的解码器设置）开始播放）。

【讨论】：

【解决方案2】：

我认为您的更大问题是尝试通过移动网络发送 4056x3040 视频。在无法支持所需带宽的许多类型的连接上，您将遇到很多停顿和播放不佳的情况。移动设备也没有足够大的屏幕来实际播放您要发送的视频尺寸。

我建议您查看 HLS 流式传输和自适应比特率。这样，您可以创建大版本、1080p 版本、720p 版本（等），视频播放器将向设备提供正确大小的视频 - 没有浪费数据/像素，更少的停顿，而且看起来仍然很棒。

【讨论】：