Adding media assets in mobile applications is an awesome way to create a unique universe to immerse your users in. 

I recently found myself in this situation where I need to embed more than 20 video files in an application, each of these files takes up nearly 100MB. That is a lot for 30 seconds of video. The particular use case of the application requires that the files be embedded directly into the application.

Without optimising these videos, it would drastically increase the app size, making each deployment and downloading so much longer and complicated, not to mention the performance issues it might entail. Luckily, that's when FFmpeg comes to the rescue.

Open source, free, command line based

FFmpeg is a large suite of libraries and programs for handling video, audio, and other multimedia files and streams. At its core is the FFmpeg program itself, designed for command-line-based processing of video and audio files.

‍

Installation

The simplest way to install FFmpeg is to use a package manager. 

++pre>++code>brew install ffmpeg++/code>++/pre>

or 

++pre>++code>sudo apt update && sudo apt install ffmpeg++/code>++/pre>

You can always download it directly from here: FFmpeg download page

Conversion

Once installed, you can make use of this powerful tool by running the following command:

++pre>++code>ffmpeg -i $pathToInputFile [-param1 value1 -param2 value2 etc] $pathToOutputFile++/code>++/pre>

Most video formats are accepted as input: .mp4, .mov, .wmv, .avi, .webm, .mkv. You can find the full list of supported formats here

The parameters that I used were the following:

• The video encoding: ++code>`-vcodec libx265`++/code>

H265, or High Efficient Video Coding, is the new standard video compression that provides even more improvement over H264, also known as Advanced Video Coding. 

++code>??++/code> By default, when converting to H265 codec, ffmpeg tags the video as ++code>hev1++/code> format, which is not supported by iOS and MacOS. You will need to add the following parameter to the command: ++code style="background-color: transparent;">`-tag:v hvc1`++/code>.

• The constant rate factor: ++code style="background-color: transparent; color: #000000;">`-crf 30`++/code>

The constant rate factor adjusts the file data rate. The lower the CRF number, the higher the quality of video.

For H264, the default CRF value is 23 for H264 and 28 for H265. You can adjust this rate to accommodate to your needs.

In my case, by combining the two parameters above, I was able to bring the average file size from 75MB to merely 4MB without significant quality loss in videos.

Here is the same frame before and after optimisation:

Before:

After:

The delivered app, containing twenty of those video files, takes up less than 300MB as opposed to 1.5GB . This was clearly a big win for the team.

Other possibilities

Obviously FFmpeg offers plenty of other possibilities to optimise your video files. The common parameters to play with are frame related.

If the destination device or display window is smaller than the original video, we can reduce the video size by applying the video filter: ++code style="background-color: transparent;">-vf scale=width:height++/code> .

++pre>++code>ffmpeg -i <input> -vf scale=480:320 <output>++/code>++/pre>

To keep the original aspect ratio, set simply either the desired width or height and let the other parameter take the value -1.

++pre>++code>ffmpeg -i <input> -vf scale=1024:-1 <output>++/code>++/pre>

To optimise the video for devices that do not yet support high FPS, you can reduce the fps like so:

++pre>++code>ffmpeg -i <input> -vf fps=30 <output>++/code>++/pre>

You could also regulate the video's bitrate which serves as an indicator of overall quality, as well as file size.

++pre>++code>`ffmpeg -i <input> -b 800k <output>++/code>++/pre>

In this article, we managed to optimise video files using FFmpeg by tweaking a couple of parameters. These should be enough for reducing file size without significant quality loss. To achieve more advanced and specific requirements, you can refer to the official documentation on https://ffmpeg.org .