Grow your CSS skills. Land your dream job.

Help w/ Video Testing

  • # July 17, 2008 at 6:34 pm

    Hey ya’ll -

    If anyone out there is currently one of those people who can not view the videos on their pages, let me know (you can email me at chriscoyier@gmail.com)

    For example, this one:
    http://css-tricks.com/videos/css-tricks-video-1.php

    I’ve been trying to test a flash player instead, and I’d like to see if my latest idea will work for you.

    -Chris

    # July 18, 2008 at 1:16 pm

    Alright I just thought I’d post some of my testing results here to keep anybody in the loop who wants to be.

    The way how I have been post the videos to watch on the web is by embedding a Quicktime format movie (.MOV). This worked online for most people, but it required Quicktime to be installed on users computers so some folks were having trouble watching them. Ultimately, I need to make a Quicktime version of the screencast because it is a podcast and needs to go out to iTunes. I also shoot in Quicktime originally, so it’s convenient.

    Still, I want to accommodate as many people as I can, so it seems like Flash video is the way to go for online viewing. I was told that if video was encoded in H.264 format, the latest version of Flash will play the movie. So I thought I’d try a bunch of different things and just see what would work best.

    Here is what I got so far:

    Quicktime Player – .MOV file
    This is what I have been using since day 1.
    Advantages: Viewable on web for most people, good quality, acceptable file size, easy workflow for me
    Disadvantage: Some people have problems viewing on web, not AppleTV compatible.

    Quicktime Player – .M4V file
    Advantages: Works for podcast/iTunes, AppleTV compatible, would only have to create a single file.
    Disadvantages: FAIL – Cannot view on the web with this combo.

    Quicktime Player – .MP4 file
    Advantages: H.264 format
    Disadvantages: FAIL – Cannot view on the web with this combo.

    Quicktime Player – .FLV file
    Advantages: None
    Disadvantages: This would be just dumb.



    Flash Player – .MOV file
    Advantages: Same easy workflow, only need to create one version
    Disadvantages: FAIL – You can hear audio on the web but no video.

    Flash Player – .M4V file
    Advantages: Works for podcast/iTunes, AppleTV compatible, would only need to create a single file, acceptable file size, acceptable quality
    Disadvantages: FAIL: Seemed to work OK on my computer, but testing on a PC (even with Quicktime installed), didn’t seem to want to display video.

    Flash Player – .MP4 file
    Advantages: H.264
    Disadvantages: FAIL: Seemed to work OK on my computer, but testing on a PC (even with Quicktime installed), didn’t seem to want to display video.

    Flash Player – .FLV file
    Advantages: Highest possible compatibility with all viewers for watching on the web.
    Disadvantages: Need to create two separate versions, lower quality, higher file size

    CONCLUSION:

    I am thinking the best way to do this is to make the Flash version for the web and make a seperate version (probably .M4V) for the podcast and direct download. The lower quality for online viewing kinda sucks, and the workflow is a bit more complicated, but I think it will accommodate more people.

    If anyone has any ideas or opinions, let me know.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".