Skip to content

Instantly share code, notes, and snippets.

@johan149

johan149/ffmpeg_optimized_videos.md

Last active December 25, 2021 01:44
Show Gist options
  • Save johan149/78490ba5a11ab6a2f46861535f839c94 to your computer and use it in GitHub Desktop.
Save johan149/78490ba5a11ab6a2f46861535f839c94 to your computer and use it in GitHub Desktop.
Download ZIP
Convert HQ image sequences to h264/mp4 h265/mp4 ogv/theora & vp9/webm For Cross-Browser Compatibility
Raw
ffmpeg_optimized_videos.md
  • H264 CRF 17
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx264 -crf 17 -profile:v high -preset veryslow -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h264_crf17.mp4"
  • H264 CRF 23
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx264 -crf 23 -profile:v high -preset veryslow -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h264_crf23.mp4"
  • H264 CRF 25
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx264 -crf 25 -profile:v high -preset veryslow -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h264_crf25.mp4"
  • H264 1500k
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx264 -b:v 1500k -profile:v high -preset veryslow -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h264_1500k.mp4"
  • H265 CRF 17
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx265 -crf 17 -tag:v hvc1 -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h265_crf17.mp4"
  • H265 CRF 23
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx265 -crf 23 -tag:v hvc1 -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h265_crf23.mp4"
  • H265 CRF 25
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libx265 -crf 25 -tag:v hvc1 -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_h265_crf25.mp4"
  • VP9 CRF 30
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libvpx-vp9 -crf 30 -speed 3 -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_vp9_crf30.webm"
  • VP9 CRF 35
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -c:v libvpx-vp9 -crf 35 -speed 3 -pix_fmt yuv420p -color_primaries 1 -color_trc 1 -colorspace 1 -movflags +faststart -an "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_vp9_crf35.webm"
  • THEORA 3
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -q:v 3 -c:v libtheora "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_3_ogg.ogv"
  • THEORA 5
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -q:v 5 -c:v libtheora "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_5_ogg.ogv"
  • THEORA 10
ffmpeg -y -r 30 -f image2 -i "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\bg\login_bg.%04d.png" -q:v 10 -c:v libtheora "C:\Users\server\Downloads\meetmo\meetmo_2.0\auth\animations\login_bg_10_ogg.ogv"

When you call addSourceBuffer on a MediaSource, you need to pass in a string that is the MIME type for the codec. If this isn't correct, the video won't play. (You can also pass this to the MediaSource's isTypeSupported function, though there seems to be a gap between what it thinks it can play and what it will play.)

The string looks like this:

video/mp4; codecs="avc1.42E01E, mp4a.40.2"

The values required in that string can be obtained by running the mp4file tool from mp4v2 on a video file, like so:

mp4file --dump movie.mp4

This Stack Overflow answer from mark4o explains how to read the very verbose output from mp4file. Basically, it comes down to:

video/mp4; codecs="avc1.<profile indication><profile compatibility><level indication>, 
mp4a.<object type>.<decoder-specific info bits>"

Where

  • Linux:

    • profile indication = mp4file --dump movie.mp4 | grep AVCProfileIndication (Extract the hex value)
    • profile compatibility = mp4file --dump movie.mp4 | grep profile_compatibility (Extract the hex value)
    • level indication = mp4file --dump movie.mp4 | grep AVCLevelIndication (Extract the hex value)
    • object type = mp4file --dump movie.mp4 | grep objectTypeId (Extract the hex value)
    • decoder-specific info bits = Look for info under decSpecificInfo, then convert each hex digit into binary, take the first five binary digits (starting from the left), then convert that value to decimal.

  • Win:

    • profile indication = mp4file --dump movie.mp4 | Select-String AVCProfileIndication (Extract the hex value)
    • profile compatibility = mp4file --dump movie.mp4 | Select-String profile_compatibility (Extract the hex value)
    • level indication = mp4file --dump movie.mp4 | Select-String AVCLevelIndication (Extract the hex value)
    • object type = mp4file --dump movie.mp4 | Select-String objectTypeId (Extract the hex value)

HTML

<video id="v" autoplay loop muted playsinline>
	
	<!-- video format depending on what the browser supports -->
	<source src="https://f002.backblazeb2.com/file/10thd-auth/auth_bg_vid_h265.mp4" type='video/mp4; codecs="hvc1"'>
	<source src="https://f002.backblazeb2.com/file/10thd-auth/auth_bg_vid_vp9.webm" type='video/webm; codecs="vp9.0, opus"'>
	<source src="https://f002.backblazeb2.com/file/10thd-auth/auth_bg_vid_h264.mp4" type='video/mp4; codecs="avc1.640032, mp4a.40.2"'>
	<source src="https://f002.backblazeb2.com/file/10thd-auth/auth_bg_vid_ogv.ogv" type='video/ogg; codecs="theora, vorbis"'>

	<!-- flash fallback if the browser doesn't support HTML5 -->
	<object type="application/x-shockwave-flash" data="https://f002.backblazeb2.com/file/10thd-auth/auth_bg_vid_swf.swf"> 
		<param name="movie" value="https://f002.backblazeb2.com/file/10thd-auth/auth_bg_vid_swf.swf" /> 
		<param name="wmode" value="transparent" /> 
		<!--[if lte IE 6 ]>
		<embed src="video.swf" type="application/x-shockwave-flash" allowscriptaccess="always"></embed>
		<![endif]--> 
		
		<!-- ultimate fallback when there is no HTML5 video support and no Flash support -->
		<img src="https://f002.backblazeb2.com/file/10thd-auth/auth_bg.png"/>
	</object> 
</video>

And don't forget to add the mime types in your webserver (Apache, Nginx, etc...):

video/mp4 for .mp4: for Internet Explorer 9+ and Safari 5+

video/ogg for .ogv: for Firefox 3.5+, Opera 10.5+ and Google Chrome +6 (and Internet Explorer 9+ if the codec is installed)

video/webm for .webm: for Firefox 4+, Opera 10.6+ and Google Chrome 6+ (and Internet Explorer 9+ if the codec is installed)

application/x-shockwave-flash for .swf: for all browsers with Flash installed

  • AV1

<source src="av1.mp4" type='video/mp4; codecs="av01.0.00M.08, opus"'>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment