Encoding Drone Video for Your Web Site

What is encoding, and why would I want to do that to my beautiful drone video?

Drones can produce some amazing video. Even modestly priced consumer drones like the Phantom 4 Pro or Mavic 2 have high quality cameras and can produce stunning video in 4K resolution (3840 × 2160 pixels). Playing this high resoultion video on a HD TV works great, in part because the memory card or cable you use to get the video to the TV can easily handle the bandwidth. But putting it on your website is another matter. Not only is that high resolution not useful on a web page (because the resolution most people's screens is much lower than HD), many internet connections can't transfer that much data without a lot of buffering and stuttering issues.

To embed drone video on your website, you generally need to encode it. Encoding typically involves resizing and/or cropping the video, followed by recompressing it to hit a specific playback rate (measured in Mb/s).

Wait! Doesn't YouTube do that?

Yes! In fact the easiest way to share or embed your drone video is to upload it to YouTube, Vimeo, or one of a dozen other video sites. These sites typically encode multiple versions of the video, using multiple settings for size and quality, so they can send whichever version is best for a given user's device and connection speed.

However, there are numerous reasons why you may not want to put your drone video on YouTube. For example you may not like the ads it plays at the end, or would like more control over the filters and how gets encoded. Or you may just want to keep it on-premise. This is where ffmpeg comes in.

ffmpeg: the Swiss Army knife of video

ffmpeg is a wildly popular open source command line utility that can do all manner of manipulations with video files. Format and compression conversions, frame rate changes, resizing, cropping, muxing or demuxing audio - these are just a few of the hundreds of things you can do with video files using ffmpeg.

ffmpeg is free to download and use. You probably want to download a binary version pre-compiled for your operating system. Once you've got it downloaded and unzipped, put the executable file (e.g., ffmpeg.exe) in a directory on your system path (e.g., c:\windows). Then it'll be at your fingertips. Open a command window and change directory to where your video file is saved.

Example: Crop and resize a 4K drone video

In this example, we'll use ffmpeg to crop and resize a video file taken from a DJI X3 camera. The original file has a frame size 3840x2160 pixels and bitrate of 59.9 Mb/s. Embedding a file of this size on a website at full resolution would be folly. We need to shrink it down to fit within a normal website width (say 1250 pixels wide), and get the bit rate down to ~2.5 Mb/s or less so it streams quickly. While we're at it, we'll apply a crop and resize so the final output is 1250x250 pixels (to match the dimensions of the DIV container on the website), and apply a 1-second fade at the beginning and end so the looping looks smoother.

Step 1. Watch the video

The first step is simply to watch the video and identify the start and stop times for the clip you want (getting it to the nearet second is probably good enough).

VLC Media Player has a 'Take Snapshot' command on the Video menu to help you plan a crop box

If we want to crop it, you should also think about which part of the frame we want to keep. If you preview the video in VLC Media Player, you can use the 'Take Snapshot' command to save a screen shot, which you can then open in your favorite Paint program to identify the exact coordinates where to crop.

If you don't need to crop, your job is pretty simple. Just figure out the start and end times, and the dimensions of output (or at least the width), and you're ready for ffmpeg.

Step 2. Need to crop? Do some math.

If you need to crop the video (with or without resizing the frame), then you need to compute the coordinates of the crop box. If you're planning to crop and resize, it's generally better to crop first and then resize (as we'll see below these can be combined in a single ffmpeg command). The crop box should be the same aspect ratio as the final output.

ffmpeg wants you to specify the crop box by four numbers (all of which are measured in pixels):

1. width of the crop
2. height of the crop
3. x-value of the crop origin (upper-left corner of the crop box)
4. y-value of crop origin

Remember all values should be in pixels, and (0,0) is at the upper left corner. It may help to save a frame grab from the video, which you can do in VLC Media Player (Video >> Take snapshot). Open the frame grab in Paint or similar, then move the mouse around to find the exact row and column numbers:

In this example, we'll crop the frame to the area in the blue box, which has the same aspect ratio as the final product. Cropping alone however won't cut it, because it will still be much too wide. After the crop, we'll tell ffmpeg to rescale the width to 1250 pixels which will make the height 250 pixels.

Step 3. Run ffmpeg

Here is the ffmpeg command that will crop and scale the video file for the requirements described above. If you want to try yourself, you can download the original video file here.

ffmpeg -i "DJI_0034.MOV" -ss 0:00:04 -to 0:00:34 -vf "crop=w=3840:h=768:x=0:y=150,scale=1250:-2,fade=in:st=4:d=1,fade=out:st=33:d=1" -c:v libx264 -level:v 4.0 -b:v 2048k -preset slow -an -movflags +faststart -f mp4 "dji_0034_2048k_v3.mp4"

This is a long command - let's break it down:

Argument	Purpose
-i DJI_0034.MOV	input file
-ss 0:00:04 -to 0:00:34	start and end times (in hh:mm:ss)
-vf "..."	apply the video filter(s) inside the quotes from left to right
crop=w=3840:h=768:x=0:y=150	crop a box 3840x786 pixels, starting from (0,150)
scale=1250:-2	scale (resize) the result to 1250 pixels wide. -2 means the height will be computed automatically
fade=in:st=4:d=1	apply a fade-in (from black) starting at 4 seconds and lasting 1 second. Note the start time is before truncation.
fade=out:st=33:d=1	fade-out for 1-sec starting at 33 secs (before truncation)
-c:v libx264	compression method (aka codec)
-level:v 4.0	use level 4 preset of compression options
-b:v 2048k	the target bitrate
-preset slow	tells ffmpeg to take its time
-an	no audio track
-movflags +faststart	move the 'moov atom' (metadata) to the start of the file so it can start playback sooner
-f mp4	output should be in mp4 format
"dji_0034_2048k_v3.mp4"	output file name. The quotes are optional in this case but would be required if the output filename had spaces.

This looks way too hard. Is there an easier way?

Yes! To help generate the ffmpeg command, we developed a Google Sheet. Copy this sheet to your Google Drive, then enter the file name, crop and scale parameters, and bitrate. The command line for ffmpeg will appear in column M. Copy-paste that into a command window, and you'll be on your way.

What else can you do with ffmpeg?

You may want to encode your video into webm or additional formats, to be fully compliant with the HTML5 native video standard.

There are also dozens of aditional video filters you can apply to your video, to make it look sharper, smoother, or modify the colors. It takes some trial and error, but have fun with it!