#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:

Comments

  1. User Avatar
    Drum

    Very useful, thank you!

  2. User Avatar
    lolcat

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

  3. User Avatar
    Sho

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

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      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!

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    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.

    cheers!

  5. User Avatar
    nanochrome

    Hey Chris You Can Use Feeder For ITunes Feeds

  6. User Avatar
    MorayWeb

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

  7. User Avatar
    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. User Avatar
    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. User Avatar
    Craig

    Listentoable? Nice! :)

  10. User Avatar
    lawrence77

    wow!
    Screencast about Screencasting! :)

  11. User Avatar
    Daniel

    Chris,

    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.

    Thanks,
    Daniel

    • User Avatar
      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.

    • User Avatar
      Daniel

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

  12. User Avatar
    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. User Avatar
    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. User Avatar
    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?

    • User Avatar
      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

    • User Avatar
      Shanna

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

      http://www.macosxhints.com/article.php?story=20071115133729552

  15. User Avatar
    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. User Avatar
    Ryqiem
    Permalink to comment#

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

  17. User Avatar
    Matthew
    Permalink to comment#

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

  18. User Avatar
    Nojan
    Permalink to comment#

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

    im so grateful.

  19. User Avatar
    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. :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag