CODEWITHSUNDEEP
ffmpeghtml5-videoh.264
mikkelam
mikkelam

Reputation: 557

Cross device h264 compatible html5 video

I'm trying to serve a large video of timelapses generated from a series of images.
Using FFmpeg I have encoded the video as an 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

I'm running into compatibility issues where the videos are not playable on iOS (safari) as well as on Windows (all browsers except chrome). Where I'm getting the following error:

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

See the full FFmpeg log here: https://pastebin.com/QUEPh3q2

I'm just looking for some resource or knowledge of how to encode my media for maximum compatibility while still preserving high quality and resolution.

Problem:
Which options I should be using in FFmpeg to maximize compatibility?

Upvotes: 0

Views: 705

Answers (2)

Doug Sillars
Doug Sillars

Reputation: 1755

I think your bigger issue will be trying to send 4056x3040 video over mobile networks. You're going to have lots of stalling and poor playback over many types of connections that cannot support the bandwidth you'll need. Nor does a mobile device have a big enough screen to actually playback the video dimensions you would be sending.

I'd suggest you look at HLS streaming - and adaptive bitrates. That way, you can create your huge version, a 1080p version, a 720p version (etc.) the video player will deliver the correctly sized video to the device - no wasted data/pixels, fewer stalls, and it still looks great.

Upvotes: 0

VC.One
VC.One

Reputation: 15881

From comments: "My videos are maximally of size 4056x3040 or 3040x4056".

I don't have Apple device(s) but you might be hitting some image size limitation on Windows.
Firefox uses the built-in Windows H264 decoder where the maximum height is 2304.

Replace the old command:

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

With this new one:

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

The above command changes the size to 3069x2300 (within Windows resolution limits) but I recommend a smaller size like 1441x1080 for maximum device / O.S / browser compatibility.

I would leave out -tune animation, add it back if its removal affects your specific image quality.

Now added is +faststart which allows the MP4 header to be at front of file (usually is placed last at back) meaning playback can begin without first downloading all videos just to reach header data (which has the decoder settings needed to begin playback).

Upvotes: 3

Related Questions