Lessons Learned: Video and Resolution in Adobe Captivate

Often I learn things the hard way!!!

Recently I was developing a course using Adobe Captivate for interaction; however, the course also had mp4 videos inserted. The clients wanted the course published for both desktop and mobile devices. 

When inserting videos into Adobe Captivate there are a number of variables to consider. We can thank multiple formats and the varying quality of computers used to complicate the issue just a bit. 

Some of the things to consider are compressing your video using resolution, bit rate and frame rate. If you're not familiar with these terms I found Video Formatting for Online Learning very easy to follow:

My clients produced the videos and wanted the following:

• Resolution: 1080p--which equates to 1920 x 1080 pixels
• FPS: 30 frames per second (which is the default in Captivate)
• Output to desktop and mobile
• Scalable for any size monitor
• Seamless output for users

BTW: The entire course is 4 minutes long with 3 slides. The first slide has a one minute video, the second slide has an interaction, and the third slide has a 3 minute video, so not a huge course!

After struggling for several days and the client getting pretty darn frustrated because the output, that was supposed to be the highest quality, did not look sharp, in fact, it looked quite pixelated, I was a bit stumped!! I tried at least a dozen different formats trying to get the course to look sharp.  

Problem 1 - Scalable

I discovered, after several experiments, that if you publish a course in Captivate as SCALABLE with a video inserted, no matter what the resolution, it makes the video look pixelated. 

Solution 1
If you have inserted video in a project, when you're ready to publish, don't check the Scalable HTLM content.

Problem 2 - Huge Course
So if you can't scale a course to the monitor and you're using 1920 x 1080 pixels (1080p) then your course is very large, and depending on the size of the monitor, your participants may have to do a lot of scrolling. Plus, if you're in a area with poor bandwidth or on a mobile device, you'll get a lot of buffering. 

This project's file sizes:                                

Captivate file sizes                        Published zipped file sizes
1080p = 118 MB                              1080p = 221 MB
720p = 63.5 MB                                720p = 114 MB
480p = 35.1 MB                                480p = 62 MB


After several days of testing various formats on different browsers (yes, I tested with PC and Mac on Safari, IE, Chrome, and Firefox, on iPad and iPhone, and tested in South Carolina, had someone test in Denver, and someone in NY, NY). I finally, and desperately, called my good friend and colleague Sean Mullen, from Engage Systems, LLC and he explained a few things to me:

1. Unless you have your access to a streaming server or dynamic streaming (like Hulu, where the server configures output based on how much bandwidth the device the user has), what my clients were requesting is not possible.
2. Flash and HTLM5 (mobile) deliver videos differently. Flash uses RTMP (real time message protocol)
3. Because mobile devices don't have hard core GHz pentium processors, information is generated very differently and therefore, videos will take much lot longer to load. Thus,  publishing to mobile devices must be a a smaller resolution and Bit Rate (Mbps) such as 1 or less, if you want to get a smoother output (without buffering).

The difference boils down to resolution, with 1080p capable of displaying a higher native resolution than 720p or 480p; however, this doesn’t mean that 1080p output for mobile will display a better picture than a 720p or 480p because mobile devices have a different way of processing videos and because you can't scale. Thus with mobile devices, the video will take too long to load with lots of buffering.

Check out this article by Rod Ward for more details on How Server Latency Can Kill Your eLearning for desktops, and even worse, for mobile devices.

Solution 2
If you're inserting video into Adobe Captivate and publishing to both mobile and desktop to get the best quality, lower the resolution and therefore the Bit Rate (Mbps), in order for the video to play smoothly and not take too long to buffer.

When you install Adobe Captivate it comes with a program called Adobe Media Encoder. And if you insert a .mov into Captivate the Encoder will open automatically and start converting the .mov to an .mp4 based on the settings of your .mov video. Or you can insert an .mp4 video into the Adobe Media Encoder and choose the settings you want. 

I finally convinced the client that if they wanted to publish to mobile devices they needed to find a balance between great video quality and good user experience. So they could not use the 1080p resolution. Below is an image of the settings for mobile devices in Adobe Media Encoder. The highlighted ones are the various formats I tried.

The final output the client decided would work, to have great video quality and good user experience for both mobile and desktop output, was 854 x 480p, 1 Mbps. 

Hopefully this article will help save you some of the headache I went through!!!

As always, feel free to leave comments.