
Ask HN: How do you produce product demo videos? - Edinburger
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?<p>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?
======
IanOzsvald
+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/10/08/lets-make-a-screencast-the-final-
cut/) [http://joltmagazine.com/2008/09/23/lets-make-a-screencast-
pa...](http://joltmagazine.com/2008/09/23/lets-make-a-screencast-part-one/)
[http://joltmagazine.com/2008/09/17/screencasting-an-
expert-r...](http://joltmagazine.com/2008/09/17/screencasting-an-expert-
reveals-the-dark-art/) 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.

~~~
ddemchuk
That was a really great reply, thank you

------
martian
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.

~~~
DarkShikari
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)

~~~
tomsaffell
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..

------
apinstein
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.

~~~
zhyder
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.

~~~
smountcastle
Care to recommend a good USB mic?

~~~
sanj
Snowball: [http://namm.harmony-
central.com/WNAMM05/Content/Blue/PR/Snow...](http://namm.harmony-
central.com/WNAMM05/Content/Blue/PR/Snowball.html)

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

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

------
timae
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...](http://www.mydigitallife.info/2008/11/20/how-to-embed-and-play-720p-hd-
high-definition-youtube-videos-fmt22-code-hack/)).

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&...](http://www.youtube.com/v/vifE3sBge8k&hl=en&fs=1&rel=0&ap=%2526fmt%3D22);

------
dhimes
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/>

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

------
shimon
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.

------
kinoglaz
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...](http://faculty.cua.edu/johnsong/hitchcock/pages/montage/montage-1.html)
] and you can google more.

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

(See also: <http://news.ycombinator.com/item?id=133349>)

------
callmeed
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.

------
mhashim
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.

------
nickfox
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>

------
satyajit
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.

~~~
Edinburger
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!

~~~
satyajit
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.

------
sh1mmer
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.

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

~~~
Edinburger
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.

~~~
seear
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...](http://nerdwithnolife.blogspot.com/2008/09/how-to-get-high-quality-
link-on-youtube.html)

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

------
apstuff
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.

------
ivankirigin
SnapsProX is pretty good.

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

------
DanielBMarkham
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.

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

~~~
Edinburger
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!

------
timcederman
Camstudio is great and completely free. <http://camstudio.org/>

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

