Getting videos to play seamlessly on a web page

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 loa开发者_JAVA百科ds, 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.

---

First of all: Check if this happens in all browsers. Try disabling all extensions and themes and look if it's working well then.

---

Secondly: After checking, return to this answer.

---

Thirdly: Continue reading this answer.

---

Make three versions: mobile, desktop and HD, and let the user decide.

• HD: The original 157 MB file
• Desktop: A smaller file, lower resolution and quality — 20~50 MB
• Mobile: small resolution around 320x480 px — 5~10 MB

Reducing the filesize can be done with QuickTime X if you have a Mac. If you have a Windows computer, various tools are available, such as Miro Video Converter.

---

Click to play buttons are simply buttons which inject the <object> tag with attributes into the DOM using JavaScript. They are usually not part of the video itself, unless it's Flash. However, Flash is slowly coming to it's end and HTML 5 supports the new <video> tag which rules. :D

---

Have fun!