What is the most efficient format of video for web?

Discussion in 'Web Design and Development' started by c073186, Feb 25, 2008.

  1. macrumors 6502a

    Joined:
    Nov 2, 2007
    #1
    Which format would be the best if I want to put some videos on my website in terms of size and load times?
     
  2. macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #2
    In terms of size vs. quality, I'd say almost certainly h.264 Quicktime. It is relatively processor intensive, though, so if either encoding time on your end or support of older computers on the viewing end is a priority, you might have to look elsewhere. It's what I use, though.

    You can, theoretically, get similar (maybe even better) results with high-end encoding systems or carefully tuned settings with an older codec like DivX, but QTPro gives you pretty good output with a minimum of tweaking for $29 (or you can use a 3rd party tool for free, but QTPro is worth it for me).
     
  3. macrumors member

    Joined:
    Jan 2, 2004
    #3
    I like using Flash. I think it is the most prevalent across browsers and platforms (except the iPhone...boo!). The latest QT codecs like H.264 are very good quality, but your audience will need the latest QT7 version installed, which a lot of PCs don't have and PC users don't want to install.

    I basically use VisualHub to convert my videos to FLV or SWF. Then I embed an FLV player in a web page to play the files as they are downloaded.
     
  4. thread starter macrumors 6502a

    Joined:
    Nov 2, 2007
    #4
    What about .mp4? Is that bad?
     
  5. macrumors member

    Joined:
    Jan 2, 2004
    #5
    Depends on the codec. mp4 is a general file format, but the actual video can be compressed with different codecs. That's my understanding of it anyway. Plain Mpeg-4 codec can be played with QT6, which is more prevalent than QT7 on Windoze machines. But the newer H.264 codec (which is also .mp4) requires viewers to have QT7.

    Like I said, I choose to use Flash to do away with the QT requirement. So I convert QT files to .flv..... this is sort of how YouTube and Google Video does it.

    You can see examples of QT converted to flv on my pages here:

    Me Singing Happy Birthday
    Me Waving
     
  6. thread starter macrumors 6502a

    Joined:
    Nov 2, 2007
    #6
    How do you actually put the videos on to the website then? When I converted my .mp4 file to .flv and drag it into iWeb, it does not display it as a video like it did on your site.

    One more question: did you use iWeb to make that site? How did you make the Next / Prev buttons? I mean how did you make all the different pages w/o them appearing on the top bar? Whenever I add new pages it adds a link to them on the top bar.
     
  7. macrumors member

    Joined:
    Jan 2, 2004
    #7
    This is where it gets a little bit more complicated. But it's not too bad. Here's the flv player that I use:
    FLV player

    Then you have to embed it into your iWeb page by inserting an HTML widget. The embed code can be generated using the wizard:
    Setup Wizard

    To get everything functioning, you'll need to have uploaded 1) the FLV player .swf file and 2) your .flv or .swf movie file to your server to be accessed by the embed code.
     
  8. macrumors member

    Joined:
    Jan 2, 2004
    #8
    I am using the "blog" template in iWeb, so all the navigation is automatically generated and only the main blog page (the summary page that you see with all the little square thumbnails and text excerpts) shows up in the main (top) navigation menu.

    If you don't want to use the blog template, you can make your own "next" and "previous" type of buttons and then hide the pages from showing up in the top nav bar by unchecking the "include page in navigation" item in the iWeb Inspector Page tab.
     
  9. macrumors regular

    Europe calling

    Joined:
    Jun 27, 2007
    Location:
    The Netherlands
    #9
    I think the latest flash player which handles H.264 codec is very good.
    I saw an amazing sample on streaming HD video fullscreen without hickups:
    http://www.flashxpress.net/forum/showthread.php?t=64585
    It also features some coding examples.

    It's in french, but click the second link 'La Demo Moviestar' to see it in action.
     
  10. macrumors member

    Joined:
    Jan 2, 2004
    #10
    Wow, that's some pretty amazing stuff!
     
  11. macrumors regular

    Joined:
    Apr 21, 2004
  12. macrumors 6502a

    Joined:
    Apr 7, 2006
    #12
    this is what I use an think it is great
     

Share This Page