Trying Out Picture in Picture in Screencasts

Tom Johnson — Fri, 18 Dec 2009 02:51:55 +0000

In a previous post, Adding the Human Element in Screencasts, I argued that adding a human element in a screencast (by human element, I mean someone you can actually see talking) increases the appeal of the video significantly. So I tested this out by adding a picture-in-picture (PIP) effect for two WordPress screencasts.

(By the way, the WordPress screencasts I create are mainly to test out some screencasting methods. But I hope they’re also useful to the WordPress community — I usually push them out to WordPress.tv.)

Here’s my first attempt to incorporate a human element. I just came back from playing basketball, and it’s late and dark, and there’s a bunch of junk in the background. I was going for the “real” effect here. But I made a fatal mistake. I plugged my mixer directly into my ancient Sony camcorder, and I think the camcorder’s default audio setting is on auto-gain, so when I’m not speaking, it increases the background static like a rushing wind.

I made another mistake: I thought I could use one microphone and just kind of discretely hold it, so that it was close to my mouth when talking into the camera or the computer screen. But when I’m holding that mic in my hands, every little hand movement transfers into the microphone, and it sounds like I’m stretching a balloon at times. It’s also just awkward to hold it.

Overall, the audio in this video is poor. The video is mostly uninteresting, and the screen demo is a little slow. But hey, this was my first PIP attempt.

With my second attempt I corrected a few things. First, I plugged two mics into my mixer and then the computer, not the camcorder. I stopped handling the mic during the recording and just attached them on little stands. As a result, the audio sounds a lot better.

New setup -- two mics, each on stands, hooked into the mixer/laptop, not the camcorder

I also recorded in a place where natural light abounds — my dining room, next to the giant patio glass door. There was just one fatal flaw in this setup: it was a Saturday afternoon and my three kids and wife were at home. In case you didn’t know, kids are drawn to microphones and video cameras like cats to string, and it was a little nerve-racking. Additionally, Jane says the kitchen is her office, and she doesn’t have to be quiet in her office.

By the way, Jane makes a cameo appearance in this video! Yep, pretty cool. Watch for it, though. It’s subtle. Look for her disapproving countenance as she passes.

Although the lighting was good, that’s the last time I will be recording anything in our dining room area. See Jane’s post for more details. :)

This video starts off with more explanation than I intended. The file size ended up being huge — 233 MB when produced through Camtasia into MP4 format. I opened the MP4 in Quicktime Pro and saved it for the web in a MOV format, which reduced it, surprisingly, to 50 MB. I then uploaded it to Youtube, but Youtube didn’t convert it to HD like it did the other one.

I’m not sure why it didn’t convert the video to HD. Perhaps Quicktime encodes the video with a codec that isn’t compatible with Youtube’s codec? I’m not sure, so I uploaded the 233MB monster MP4 video file and it did convert it to HD.

So what do you think? Does adding the human element increase the appeal, even as ordinary as I am?

One advantage with including a talking head, I realized, is that it fills the gaps when you explain concepts in videos (when you explain concepts, you usually don’t move your mouse and the screen is still). Without the talking head, you would normally resort to diagrams, charts, and workflows to provide eye candy during these static moments. But with the talking head, you can just talk to the user and still keep him or her watching.

I think I’ll invest in a couple of studio lights for my office to give it better light. I told my manager that I might need to add a studio light in a conference room the next time I record video tutorials for work, and he asked if I would also be wearing makeup to compensate for strong light that might wash out my face. Uh, no. Wearing makeup before heading off to a conference room … will be the last thing I ever do. In that case, he said I should try to bounce the light.

There’s so much to learn with video, I suppose.

Blog Sponsors

HD Screencast Example

Tom Johnson — Mon, 09 Mar 2009 05:22:12 +0000

Embedding HD video screencasts into a WordPress blog is something I’ve been trying to figure out. The HD quality is key because it allows me to compress the file into a small space without the video looking fuzzy — a necessity for screencasts with small text. I also like the idea of showing video content directly where the reader is, rather than displaying the video in a popup or secondary window.

I learned that if you upgrade your space on a WordPress.com blog (not a self-hosted WordPress blog), you can then upload videos using the Add Video button. If you record in a 1280 x 720 px dimension, the uploaded video will be automatically rendered into HD format. You can then grab the embed code for the video and embed it on your self-hosted WordPress blog, changing the width to 640px and the height to 360px, which is what I’ve done below.

The following video explains a bit about the different files in a WordPress theme. I’m not so much trying to explain this concept as I am demonstrating the HD format for the screencast. Make sure you select the HD On option, since you can’t toggle back and forth from Off to On without restarting the video.

If you expand the view to full mode using the expand button in the lower-right corner, you can really see the difference between HD and non-HD. When it’s small, the difference isn’t that noticeable. Still, either mode is a lot clearer than other non-HD videos compressed to this size.

Youtube is also offering an HQ (for “high quality” — not quite the same as high definition) option for uploaded videos, so soon this may be a default feature with screencasts. The following is a youtube video that looks fuzzy if you don’t select the HQ option. If you expand the video to full size, though, it’s not as clear as my expanded WordPress video.

To overcome fuzziness problems, you usually have to use pan and zoom features to magnify content. This makes it more time-consuming to create the video. I realize, though, that the text in my sample HD screencast is pretty tiny and would benefit from some magnification.

What’s especially cool is that WordPress has made the HD transcoding engine available for use on your own server. The only catch is that it requires some advanced configuration on your part. Still, you could essentially create HD screencasts behind the firewall for your company.

I'd Rather Be Writing » HD

Trying Out Picture in Picture in Screencasts

Blog Sponsors

HD Screencast Example

Blog Sponsors