Ask HN: How do you produce product demo videos? | Hacker News Reader

Ask HN: How do you produce product demo videos?

50 pointsEdinburger39 comments

I would like to show a product demo video (screen capture) on my homepage. Seems like this is a common requirement. Can anyone share some advice from their experiences?

What software do you use to produce the videos? Any free solutions? What resolutions worked well for capturing text in a browser? Streaming or progressive download? Any other hints?

View on HN

+1 for CamTasia (Windows) and ScreenFlow (Mac), also RecordMyDesktop (Linux). CamStudio (free Win) ok. Online solutions (screencastomatic, screentoaster, jing) also good. I'm a professional screencaster (http://procasts.co.uk) - if you want to crib examples, see my Examples page, they all reflect live use of screencasts that make users happier, convert more visitors, reduce support costs etc. Definitely get a good mic - I prefer pro audio equipment but you'll go a long way with a decent USB mic (not 3.5mm jacks, they get electrical noise from the motherboard). If you can't do good audio yourself then see something like voices.com for outsourcing but melding the video+audio can be problematic. You do need good audio, as others have said the easiest way to kill your presentation is muffled, noisy, volume-changing hard-to-understand audio. Expect 1 day to do a first reasonable video of a few minutes, several days if you want a perfect cut with great audio, a bit more if you want to add effects (captions, fades, highlights, scrolls). Look at ShowMeDo for 800+ examples of screencasts made by many users on different OSs with different tools. Jolt Magazine has three useful articles: http://joltmagazine.com/2008/10/08/lets-make-a-screencast-th... http://joltmagazine.com/2008/09/23/lets-make-a-screencast-pa... http://joltmagazine.com/2008/09/17/screencasting-an-expert-r... See LongTail video player (http://www.longtailvideo.com/players/jw-flv-player/) to embed flv/mp4 result, they have great plugins, it works with thickbox/lightbox, stats tracking possible, lots of features, I use it for all my work.

That was a really great reply, thank you

Aside from all the technology, it's crucial to get a solid, professional voice-over that tells a clear story about your product. My personal experience has been that even the best video production can be quickly tarnished by a voice-over that is casual, meandering, or inconsistent. For our demo video, we first sketched out what points we wanted to make in the video, wrote a draft script, then recorded nearly an hour of screen footage. My colleague then spent a couple of days locked in a room with iMovie and a microphone. We ended up with a five minute video that I think really captured what we were trying to do with our product. We used ffmpeg for conversion to mp4+h264 (and a fallback to flv), and the very respectable JW flash video player. I think Snapz Pro X was used for video capture.

We worked with MostlyLisa.com on PriceAdvance.com's video demo (http://www.priceadvance.com/demo_video) - she did a great job and is up for more work like this I'm sure.

Do you have a link?

I'd guess it's http://www.uuorld.com

Seconding this. Use x264 (or an application that uses it, like ffmpeg) and make yourself an mp4 video that plays in Flash. Having low quality for a product demonstration video simply isn't tolerable--and yet it's amazing how much people tolerate awful quality internet video despite the fact that one doesn't actually need a lot of bandwidth to achieve reasonable quality. JW Player is of course a great tool, and takes literally 30 seconds to set up.

My standard toolchain is ( x264 -> rawvideo + faac or NeroAACEnc -> aac audio ) -> mp4box -> mp4 file. For those who are commandline-phobic, there are many GUIs to streamline the process; for example, MeGUI can produce Flash-compatible H.264 video files with x264.

Make sure you're using the latest versions of the encoders as well, especially if you're trying to get away with a much more fancy video than the one in the parent--it's better quality and compression for free.

Also remember that Flash supports H.264 all the way up to High Profile, so there's no reason not to use all the features.

(aside: above video uses a ~2007 version of the encoder, according to my detection tool)

See my comments on using .f4v instead of .mp4 here: http://news.ycombinator.com/item?id=443542

NB: This comment was made after this thread went dormant. This cross-post is for the benefit of anyone browsing the archives..

We use Screenflow. Mac-only, but quite awesome: http://www.telestream.net/screen-flow/overview.htm

Has a/b editing, records lots of things as separate tracks and has a special-purpose video editing interface just for screencasts.

Editing interface is a little quirky to get used to but the results are great.

Seconded. Definitely the best option if using a Mac. Make sure you get a decent mic: since you'll still be grabbing your voice from the old-fashioned analog world.

Care to recommend a good USB mic?

Snowball: http://namm.harmony-central.com/WNAMM05/Content/Blue/PR/Snow...

and Snowflake: http://www.bluemic.com/products/snowflake

I own the former. Kinda wished I owned the latter.

Jing (jingproject.com) is the only free solution I know of. Wasn't exactly what we wanted, so we used Screenflow, which is $99 and Mac only as has been mentioned. It's very easy to use and the editing options are great.

Once you have the video, there's obviously still the decision of how to get it onto your site. After trying a couple different methods, I settled on YouTube. My primary objection to this originally was the video quality, however there is a way to force embedded video to play in either "High Quality" which I found acceptable, or in HD, which is great (and what we ended up using). To do this, you append "&ap=%2526fmt%3D22" for HD or "&ap=%2526fmt%3D18" for high quality onto the back of both links in the YouTube embed code. (more here: http://www.mydigitallife.info/2008/11/20/how-to-embed-and-pl...).

Lastly, we used lightwindow to diplay the video (http://www.stickmanlabs.com/lightwindow/). Just drop some js and css files into your site and follow the following example code (in the case of HD). Mess with the width and height as appropriate.

<a class="lightwindow page-options" title="My Demo" params="lightwindow_width=640,lightwindow_height=385, href="http://www.youtube.com/v/vifE3sBge8k&hl=en&fs=1&...;

If you find the other recommendations here a bit more than you were looking for, have a look at Wink:

http://www.debugmode.com/wink/

Wink is quite cool, and I especially like how easy it is to edit, cut-n-paste, and work with the images.

Wink is great! The only downside is that it cannot produce mp4 video files. To do that, you can use Jing Pro ($15) to capture the Wink screencast playing.

I'm a freelance developer, but a couple of months ago, one of my customers asked me to make some screencasts of the product we're building.

I tried Camtasia and Adobe Captivate on Windows. Camtasia has been best to work with, although it has a couple of pretty horrendous bugs that require nonobvious workarounds that took me a while to learn. On the bright side, it has a great set of online video tutorials (duh) and it's easy to do transition effects and record from Powerpoint.

The other commenters are right -- the hardest thing to do well is the voice-over. You need a good mic -- USB digital mics are probably best, but I've gotten by OK with a good headset. You also want a quiet place -- digital "noise removal" post-processing makes me sound like the Predator. One day when I was at a shared office, I spent the morning standing in the bathroom, recording audio to my laptop.

It's also vital, of course, to have an engaging script and a product that's interesting to watch. Writing and filming the screencast will force you to concentrate on these things from the perspective of a new user, and you should take that opportunity to ferret out any needless distractions.

For best results you need not relay on just software solutions. Think about visual composition first. I can't give you any useful url, but start here [ http://faculty.cua.edu/johnsong/hitchcock/pages/montage/mont... ] and you can google more.

CamStudio is an open-source capture program for Windows that records to .avi, with the option to convert to .swf. http://camstudio.org/

We're producing some for our online image sales app and websites. You can see a few recent ones here:

http://www.nextproof.com/holidays/

I use ScreenFlow and it's incredible. Very easy to record and create zooms/transitions.

For technical ones, I record the audio myself. I have an AKG 3000 studio microphone that goes into an ART TubeMP pre-amp. The pre-amp then goes to my MacBook Pro. I've found that it's better to record the audio after the video.

We were also lucky to find a great voice-over person on Craigslist. Usually, we just send him the video file and a rough script with a few time markers for guidance. He does a GREAT job and is not very expensive (especially compared to how many takes I require). I would definitely recommend going this route if you can.

I was recommended the following service http://www.screentoaster.com/ Didn't try it personally yet, but let me know what you think of it if you end up using it.

I use Camtasia (http://www.techsmith.com/camtasia.asp). It costs $299. It is hands down the best. It has a technology called SmartFocus which zooms in to where the mouse cursor is. This is very useful with youtube's limited real estate. Definitely put your product demo on youtube. You get exposure from markets that you may be unaware of. You can see where I've used SmartFocus here:

http://www.youtube.com/watch?v=cL9qS6bAMPU

Are you looking for screencasts or videos of desktop apps of sort? I am not sure what people use for screencast softwares, but the Railscasts guys seem to be creating some neat looking ones. You might want to ask them. I know the LearningRails.com guys personally, and they do a great screencast too. There is a free HYperCam for Windows, but result is not all that impressive. Adobe has something called Captivate, which will let you create some FLV/F4Vs I believe.

Hi, I'd like to do a screencast, played back through a Flash player. The Railscasts are neat but they're not embedded in the browser. From your email, it sounds like Captivate might do the job although I'd have to pay for it. Any advice on progressive download versus streaming for playback?

Thanks!

Sorry for late reply - (I would love if HN sends me an email everytime someone replies to one of my threads). Flash video streaming is a big deal. Not many are doing it. Most of them (including Youtube) are doing progresive download. Once again Adobe has Adobe media server, which lets you stream flash video content.

I'd actually recommend Captivate from Adobe (it was a Marcomedia product). The reason being is it's awesome for mastering videos. It seems to run acceptably in VMWare fusion too.

I've used iShowU to capture video on my Mac but then mastered it into Flash files. You can add pauses, description, etc.

Screenflow also seems really bad ass from my limited experience with it if you are happy with doing 100% Mac demos.

I use XVidCap, edited with KDENlive, then uploaded to youtube and embedded that. All free (using ubuntu)

Thanks - I think the only problem is the resolution on YouTube is not very good. I followed the link through your profile to your YouTube video and although it's nice, for my purposes I'd like the text to be clearer on the video.

There's a post here with some hints on getting high quality up on YouTube: http://nerdwithnolife.blogspot.com/2008/09/how-to-get-high-q...

Yea if you want higher quality, I wouldn't use youtube. I still recommend XVidCap for linux... I find it much better then the others (like RecordMyDesktop). The quality will be very HQ and you could easily convert to FLV and host it yourself.

The quality will be very high, but youtube will ruin it, I agree.

Here is a higher quality version done with XVidCap: http://overtrainer.com/render.ogg

There's a great screencast about how to screencast over at peepcode.com ($9)

Blue SnowBall (usb mic) + Audacity + Camtasia.

Start with the written dialogue, record it meticulously then do the visual.

The Blue Snowball referral came from Scott Chacon at GitCasts. Great piece of equipment. Thanks Scott.

SnapsProX is pretty good.

We use Snaps also. I'd definitely recommend it.

I'm a big Camtasia fan. Like the interface and the capabilities.

It's not cheap, but I think you can get it as 30-day trialware. Not sure.

Email Demogirl.com. She will do the job for you (assuming she likes your application) and get you a few beta users.

Interesting. I really like the way her videos zoom in and out on the browser to focus on the important area. Even though the video size is quite small, it works because of the zooming. I think I'll email her and also ask what software she uses!

Camstudio is great and completely free. http://camstudio.org/

Thanks everyone for the excellent replies. I'll evaluate software in the next few days.

Reply on news.ycombinator.com