Getting videos to play seamlessly on a web page

Question

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/"&gt;
 </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.

Answer 1

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!