#63: On Screencasting

This is somewhat of a behind the scenes look at how I create and distribute the screencast. I go over the hardware and software I use, how it gets stitched together, and the sizes/formats it gets put into and why. Then I talk a little bit about the distribution and how it gets out there to you all.

Links from Video:


  1. Drum

    Very useful, thank you!

  2. lolcat

    Where did you bought the support for the Rhode Podcaster? Thanks!

  3. Sho

    Chris, you can play mp4 (h264) file directly in JW flash player. and the quality will be outstanding on smaller filesize.

    • Chris Coyier

      I think that was my plan at one point, but then it would play .mp4 not .m4p. I don’t even know the difference but I know that the AppleTV format was .m4p and that’s what I want to put it out in. Or I could be remembering it wrong.

    • Sho

      You are right! I really think that your videos here on the site (I watch them here) are in very decent quality. The only advantage is file size (flv vs. mp4), but CPU usage will be bigger on viewer’s side.

    • Austin Dworaczyk Wiltshire

      M4P stands for “Protected MP4”. Basically, you are “jailing” your mp4 file by using the M4P format. However, since you are offering a “m4v” version, this will work just fine with the JW player.

      In addition, for proper Apple TV support, you can stick with either mp4 or m4v. It’s the same standard video container and it won’t matter either way. Only the name of the extension is different.

      What governs if a file is Apple TV compatible or not are the encoding settings. Usually it has to do with the amount of reference frames used when encoding your P or B frames, the number of B-frames, VBV buffer size, max bitrate, and one or to other (minor) things.

      In terms of the quality of your screencasts, I would probably give them an 8 or a 9 out of 10. The mean reason for me not giving it a 10/10 is due to the fact that there is some funky codec / recording settings going on. You have a sort of “pulsing” quality. This is normally due to the fact that the default encoder for flv is Sorenson’s Spark codec, which is just plain terrible. The pulsing effect occurs due to inefficient use of key frames. Basically you have one key frame that is perfect quality, and then bad encoding practices result in a huge degradation in quality with every subsequent frame until the next key frame. One thing you could try doing is using the On2 VP6 codec for your flv videos, it should be an option in Adobe Media Encoder.

      Or you could just encode your screencasts to high quality MP4 (or M4V, same thing remember?) and host the lower resolution one for display on your website and the higher resolution one for download. You will obtain maximal quality for both cases and everyone with Flash version 9.0.115 or higher (pretty much the whole world) will be able to play it just fine.

      If you want help fine tuning the H264 settings for optimal display of your screencasts, just let me know. I love doing this stuff!

    • Anoymous

      I believe Chris ment .m4v rather then .m4p ;)

      See also Wikipedia on MPEG-4

      .mp4 is the general extension (“MPEG-4”), and .m4a / .m4v (“MPEG-4 Audio” and “MPEG-4 Video” respectively) are done by Apple in order to make clear wheter it’s an audio or visual file.

      iPod/iPhone require the files to be .m4v / .m4a.

    • Austin Dworaczyk Wiltshire

      Okay, if he did make that mistake, then he is mistaken in thinking that JW player won’t play them. It will, just fine.

    • Chris Coyier

      Yep, I totally mispoke, I meant the final highest-quality revision is .mp4, exactly what is linked to above the video itself.

      So the FLV player will play that fine eh? I’m definitely going to have to try that again, since literally the only reason I even make the FLV version is to embed here. The big question is, will it play fine even for users who do not have Quicktime installed?

      I believe I do use the sorensen spark codec for FLV, but I guess that will be a moot point if we can get the .m4v files working here too.

      And I’m not quite sure how H.264 fits into this… That’s just a codec as well right? And I think I’m using the Apple Animation one all the way through the process for the files that remain Quicktime.

    • Christian

      Hi Chris,

      just take your apple-tv file and change the extension to “.flv”. Everyone with at least flashplayer 9 will be able to watch that at he the same size and quality. (webvideouniversity.com/blog/technical_stuff/2008/08/14/understanding-high-definition-video-on-the-web-h264/)

      cheers, christian]

  4. mary

    Very nice! Wish there was an equivalent for PC users… I did learn quite a bit though, enough to get me started setting something up for myself.


  5. nanochrome

    Hey Chris You Can Use Feeder For ITunes Feeds

  6. MorayWeb

    I have been looking for this rather ironic screencast for a while now! Thanks Chris!

  7. Chris

    Hi Chris,
    Just to let you know that the audio level of your video was too low. I noticed that in some of your other videos as well.
    Anyway another very interesting video where I learned a lot :-) Thank you.

  8. Paul

    Great screencast Chris. I’ve been wondering about placing video content on regular web hosts like Dreamhost and such. They advertise huge amounts of bandwidth but how real is that? If you have a video on your website or blog go viral, how much could you really get away with before they shut you down? Is it just an advertising come on?

  9. Craig

    Listentoable? Nice! :)

  10. lawrence77

    Screencast about Screencasting! :)

  11. Daniel


    Re: Your second screen. Is that another machine? Or is it an extension to your Imac? If it’s an extension, how did you do it? Is there a special cable? I have an imac and I want to do the same thing. My current set up is I have an imac as my main machine and next to it is a vista box.


    • Austin Dworaczyk Wiltshire

      All he has done is attached a second display (probably through a DVI cable) to the back of his current mac. In the display settings you can configure each display independently. No need for another machine.

    • Daniel

      Thanks! I bought the converter and now I have two screens!

  12. John Grinde

    I actually hand-code my feeds as well, because I have an annoying habit of switching back-and-forth from Drupal and WordPress, and I have full control, and if the database server dies, the feeds are unaffected.

  13. Sebastiaan Stok

    Feed creating can be automated.
    And it does not have to be slow! just use PHP te write an file, and not need to read it ever time from the database :)
    Only update that file once there is an new entry.

    For the length of the movie it self, you can use FFmpeg (if installed on the server).
    It takes some time and coding skills, but it is possible.

    On Windows you can use Jing (requires .NET Runtime).
    It only records in swf, but it is completely free!

  14. adot

    Silliest question that anyone will ask about this post…
    On your dock, you appear to have your apps separated by “category”

    How did you achieve this effect?

    • Krinkle

      One way of doing it is by use of “Dock Dividers“. Simply download Horizontal, un-zip it, and drag the “Blank” to your Dock. If you want more spaces, then duplicate the “Black.app”-file and drag more in the dock. Dock Dividers offer also different types of spaces (like lines, stripes, dots etc.)

      However, Chris’ spaces seem to be more elegant. I’m curious how he does it aswell :D

    • Shanna

      here’s what you’re looking for guys.. super easy.. and awesome for keeping your dock all organized. :)


  15. me_myself

    You should check out the application Screenflow. I have used both it, iShowU (HD and Pro), and Snapz Pro X and screenflow is by far the best. Very simple to use, editing tools built in, and easy exporting. In terms of editing, it is almost a full-fledged video editing application, with the ability to set zoom/pan points, custom mouse cursors, mouse click effects/sounds, etc etc.

  16. Ryqiem
    Permalink to comment#

    Actually, the screen resolution is 1050p (if you’re on the 20″)

  17. Matthew
    Permalink to comment#

    Chris, click “show displays in menu bar.” Makes it so much easier for people who chage resolutions often.

  18. Nojan
    Permalink to comment#

    Chris you are truely generous , for sharing whatever you know…

    im so grateful.

  19. Johnathan
    Permalink to comment#

    Hey, great stuff. :) Just wanted to add that the pop filters not only block harsh “P” sounds but also help block saliva from getting into the mic which can cause corrosion. Good thing to have if you want to try a podcast in the style of Daffy Duck. :)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.