Getting videos to play seamlessly on a web page

[johnmerlino]

Hey all,

I have a mov file that's 157 megabytes. I try running it on my page within a javascript scroller animation and the animation is very choppy and in fact I used css to simulate a mask but the thing doesn't get masked, probably do to the sluggishness of whole page, the page never fully loads, and the movie file makes it nearly impossible to scroll through the page. The file is just too huge. I currently have it embedded as such:

         <a href="#">
           <object class="im" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="286" width="655">
  <param name="src" value="why_eating_dry_fruit_is_unhealthy.MOV">
  <param name="autoplay" value="false">
  <param name="type" value="video/quicktime" height="286" width="655">
  <embed src="why_eating_dry_fruit_is_unhealthy.MOV" height="286" width="655" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">
 </object>
         </a>

My question is:

1) Should I convert the mov to swf - that is, is swf a more compatible and appropriate format for seamless integration in html web page?

2) Whichever I choose, how do I reduce the file size - like on youtube where the videos run seamlessly? I plan on using javascript to scroll through a gallery of videos, so I need the videos to not bog down the page.

3) Also, a lot of sites with galleries of videos have an icon that indicates "click to play". Is that part of the video itself or can I just create an image and then when clicked on, the video plays?

I do have Adobe Flash CS4 Professional, if that matters. And if mov file is more suitable, then how can I reduce its file size?

Thanks for response.