How to create App Preview videos for iOS Apps?

Recently, I want to improve the quality the front store page for my Devsigner app.

After reading through some of the online resources, one way to improve the front page is to add app preview videos for the app.

Since the app is a paid app, I think this would be a good idea as well to showcase to user what the app can do.

The problem

As an iOS developer, we can easily record a video of our app from the any simulator.

But you will probably get an error if you use raw video output from simulators to upload to App Store Connect because of mismatches in video resolutions.

Apple requires specific resolutions for different device settings. You can take a look at this requirement here. There are also other specifictions for bitrate and audio codec that need to be fulfiled. And the raw output from simulators are normally bigger than what is required by Apple.

The solution

Luckily, this issue can be easily solved by using the opensource command line tool ffmpeg. You can install ffmpeg on Mac using brew: brew install ffmpeg

These are steps that I use to create an app preview video for Devsigner:

Step 1:

Record a video using Simulator recording feature or commandline

xcrun simctl io booted recordVideo preview.mp4

Step 2:

You can run the following command to resize the videos to the required resolution

ffmpeg -i preview.mp4 -vf scale=886x1920,fps=25 -aspect:v 886:1920 preview_fix_resolution.mp4
ffmpeg -i preview_fix_resolution.mp4 -vf scale=886:1920 -c:a copy preview_final.mp4

The first command is to convert a video to 887x1920 (required for 6.5” devices). The second command is to fix the audio codec so that App Store Connect will accept our video.

Done, now you can upload the preview_final.mp4 video to the App Store without any problem.

Conclusion

It would be great if the videos recorded by simulators can be used directly for app previews. I hope this addition will come soon in the next version of Xcode.

In the next article, I will go into how to use iMovie and fastlane to make this app preview creation process faster and less manual.