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 it 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