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.
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.
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:
Record a video using Simulator recording feature or commandline
xcrun simctl io booted recordVideo preview.mp4.
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.
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.