how to play html5 video without using autoplay because it buffers EVERYTHING and slows really down page load

Sample code is at the end of the post for reference.

Sorry for being so long winded, just trying to be through and leave no possible relevant info out.

This seems like I painted myself in a bit of a corner. I have a show hide toggle function that seems to work fine. I have a small army of DIVs that are each shown and hidden when menu items are clicked. This is a video gallery. The buttons are in a JQuery scripted slider and are in an html list. CSS is used with Div IDs

The function and hiding all work great. This seems to be a strategy question since if I want the appropriate video to start playing when the div is shown, I remove preload="none" when I load this page, ALL 32 videos appear top be buffering and it KILLS page loading times. When I have preloading set to none, the video sits there ready to be played after somebody clicks the appropriate button to show it. I and my clients expect to see the movie start to play once the window displays. As a matter of fact, once the window comes up and the video says "loading", all I have to do is hit play and i开发者_运维问答t starts playing smoothly. So, without using autoplay, is there a way to get the video to play when the button is pressed to un-hide the appropriate div?

BTW I am using Video for Everyone as a base but it doesn't seem to offer a solution for more than a couple of videos.

Perhaps my video format is wrong but I am using h264 video saved out of quicktime pro in a .m4v extension. I am trying to also find out if the format can autoplay but I know OGV cannot so I'm not pinning much hope on that. Also, I will add a flash fallback.

Please be kind of my code because I'm just an animator and know nothing of this stuff really. Also, it looks like my show hide function is getting truncated by the viewer. It's there and works fine, really.

<script>
<!-----Javascript----->

function hideAll(){
tag = document.getElementsByTagName("div");
 for(x=0;x<tag.length; x++){
 //alert(tag[x].getAttribute('id'));
 if(tag[x].getAttribute('id').indexOf("hide") != -1){
 //alert(tag[x].getAttribute('id'));
 tag[x].style.display = "none";
 }
 }
}

function show(id){
el = document.getElementById(id);
 if(el.style.display == "none"){
  hideAll();
  el.style.display = "block";
 }
 else {
  el.style.display = "none";
  document.getElementById('hide').style.display = "";
 }
}
</script>

<!-----The list of buttons inside of the div slider----->
  <li>
               <div id="MenuGroup">
    <div id="MoviePicL1">
     <span style="cursor:pointer" onClick="show('hide1')"><img src="images/Posters/Movie1image"></span>        </div>
      <div id="MoviePicL2">
     <span style="cursor:pointer" onClick="show('hide2')"><img src="images/Posters/Movie2image"></span>      </div>
      <div id="MoviePicL3">
     <span style="cursor:pointer" onClick="show('hide3')"><img src="images/Posters/Movie3image"></span>      </div>
   </div>
  </li>

What they are toggling are these:

<div id="hide2" style="display:none;">  
       <div id="VideoContainerDiv" class="mybox"> 
            <video id="Movie1_Reel" width="580" height="326" controls preload="none">
          <source src="Videos/movie1_Reel" type="video/ogg"></source>
             <source src="Videos/movie1_Reel" type="video/mp4"></source>
         </video>
       </div>
    </div>
</div> 

---

Well, you can call play() on the video object when it is shown.

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#playing-the-media-resource

---

There's a known bug in Webkit that causes videos to buffer automatically, even if autobuffer is not set. It is currently fixed in the Safari nightlies (and may be fixed in Chrome, not really sure).

What you can do to negate this is to create a "default" state for your player. Do not physically create the <video> element until you want to begin buffering the video file. For instance, you might have a screen capture from the video with a play button (some simple images and css). On click, the images would be replaced using JS with the <video> element.

Hope this helps!