title: Decreasing loading time of HTML5 Video
body: <p>Live site- <a href="http://www.thecompletefinancialplan.com" rel="nofollow">http://www.thecompletefinancialplan.com</a></p>
  
  <p>I use <code>videojs</code> player to add video on my site.</p>
  
  <p>Video: KeithKolinskyCFP.mp4 - 25.5MB,
         KeithKolinskyCFP.webm - 31MB,
         KeithKolinskyCFP.ogv - 50MB</p>
  
  <p>I've waited at least 30 seconds and it still has not begun to play in mozilla, my internet connect is not slow. Any idea how can i decrease loading time of that Video.</p>
  
  <p>My code-</p>
  
  <pre><code>&lt;video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="http://www.thecompletefinancialplan.com/images/video.jpg" width="320" height="240" data-setup="{}"&gt;
      &lt;source src="http://www.thecompletefinancialplan.com/Keith_video.mp4" type='video/mp4' /&gt;
      &lt;source src="http://www.thecompletefinancialplan.com/Keith_video.webm" type='video/webm' /&gt;
      &lt;source src="http://www.thecompletefinancialplan.com/Keith_video.ogv" type='video/ogg' /&gt;
  
     &lt;object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240"&gt;
      &lt;param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /&gt;
      &lt;param name="allowFullScreen" value="true" /&gt;
      &lt;param name="wmode" value="transparent" /&gt;
      &lt;param name="flashVars" value="config={'playlist':['http%3A%2F%2Fwww.thecompletefinancialplan.com%2FKeith_video.jpg',{'url':'http%3A%2F%2Fwww.thecompletefinancialplan.com%2FKeith_video.mp4','autoPlay':false}]}" /&gt;
      &lt;img alt="Big Buck Bunny" src="http://www.thecompletefinancialplan.com/images/video.jpg" width="320" height="240" title="No video playback capabilities, please download the video below" /&gt;
  &lt;/object&gt;
  
  &lt;/video&gt;
  </code></pre>