trying to use 'each' instead of clicking thru list

trying to use 'each' instead of clicking thru list

hello -

i find that on my website, when i click on a video to play it there is a noticeable pause while it loads.
i have found that i can set up a secondary video element with preload=auto, with the video names (1 ogv and 1 mp4) filled in as source, and it will preload them. and then when that video is actually called by the main video element, there is no delay. as expected. but i have to set up a preloader for every video if i do it that way, and that is a pain.

i have my videos set to play when their image is clicked, as can be seen in the js/jQ code. and that works fine (and the v1 & v2 variables are correctly alerted, depending on which thumb was picked).

what i would like to do is figure out how to automatically walk thru each of the class.thumb divs, and have it substitute the v1 & v2 into a single Preload video element, let it preload, then do the same for the next in the list.

i have tried using the 'each' method (instead of .click), and many permutations and other jQ methods (i.e. attr(onclick()) ), and can't get it to pick out the value of v1, like it does if the element is actually clicked.

i would appreciate any suggestions.

  2. <!doctype html>
  3. <html lang="en">

  5. <head>
  6. <title>TESTING</title>
  7. <meta charset='utf-8' />
  8. <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  10. <style type="text/css"> </style>
  11. </head>

  13. <body>
  14. <div id="first" class="thumb" onclick="v1='smoker_1.ogv',v2='smoker_1.mp4'" style="display:block; float:left; border:2px solid lightgray; width:150px; height:150px; margin-top:355px; margin-bottom:4px; margin-left:4px; margin-right:4px; background-color:lavender; background-size: 100%; background-repeat:no-repeat;"></div>
  16. <div id="second" class="thumb" onclick="v1='peru.ogv',v2='small.mp4'" style="display:block; float:left; border:2px solid lightgray; width:150px; height:150px;margin-top:355px; margin-bottom:4px; margin-left:4px; margin-right:4px; background-color:lightblue; background-size: 100%; background-repeat:no-repeat;"></div>  
  18. <video id="Preloader" width="480" height="480" preload="auto">
  19. <source src="" type="video/ogg">
  20. <source src="" type="video/mp4">
  21. </video>
  22. </div>
  23.  
  24.  <script>        
  25.  
  26. $(".thumb").click(function(){ 
  27. /*  $(".thumb").each(function() {  */
  29. alert(v1);
  30. alert(v2);
  31. $("#Preloader").find("source").first().attr("src",v1);
  32. $("#Preloader").find("source").last().attr("src",v2);
  34. })
  35.  </script>
  36.  
  37.  
  38. </body>
  39. </html>