Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    trying to use 'each' to preload

    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.
    Code:
    <!doctype html>
    <html lang="en">
    
    <head>
    	<title>TESTING</title>
    	<meta charset='utf-8' />
    	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    	
    	<style type="text/css">	</style>
    </head>
    
    <body>
    				<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>
    			
    				<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>  
    		
    			<video id="Preloader" width="480" height="480" preload="auto">
    				<source src="" type="video/ogg">
    				<source src="" type="video/mp4">
    			</video>
    </div>
     
     <script>        
     		
    		$(".thumb").click(function(){ 
    		 /*  $(".thumb").each(function() {  */
    		
    		alert(v1);
    		alert(v2);
    		$("#Preloader").find("source").first().attr("src",v1);
    		$("#Preloader").find("source").last().attr("src",v2);
    		
    		 })
     </script>
     
     
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    in retrospect, my post was pared down way too much. in fact, it probably didn't make sense. so i added much of the code back in, and tried to be more clear about the issue :

    the problem is not getting v1 and v2 to appear in alert boxes, it is passing their values into the Preloader video element for processing.
    when i mentioned "instead of clicking", i meant that, if i click on a box, that v1 and v2 are loaded into the Preloader and processed. no problem. (run this new code). they can be loaded into the main video element, or a Preload video element, or both (which would be pointless). i have put most of my code in so you can see it working.
    But, as i said, when actually used on a webpage, there is a delay when the box is picked, while the video is loaded. to get around this, my thought was, using the 'each' method, to have js code walk thru each of the .thumb elements (there may be 20 of them), inserting each v1 & v2 into a "Preloader" video element (that has no display) as it goes, and thereby preloading all my videos before a single one is called in the Webpage. they are only about 8 seconds long each, so preloading shouldn't take long.

    if i click on each .thumb (box) it loads fine, but i can't seem to get 'each' to do it. here is the fiddle - http://jsfiddle.net/pratto/tuQVs/10/

    Code:
     <!doctype html>
    <html lang="en">
    
    <head>
    	<title>TESTING</title>
    	<meta charset='utf-8' />
    	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    	
    	<style type="text/css">
    		.thumb{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;}
    	</style>
    </head>
    
    <body>
    				<div id="first" class="thumb" onclick="v1='http://techslides.com/demos/sample-videos/small.ogv',v2='http://techslides.com/demos/sample-videos/small.mp4'"></div>
    			
    				<div id="second" class="thumb" onclick="v1='http://upload.wikimedia.org/wikipedia/en/d/dc/Pac-Man_Atari_2600_footage.ogv',v2='http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'"></div>  
    		
    			<video id="Preloader" width="50" height="50" preload="auto">
    				<source src="" type="video/ogg">
    				<source src="" type="video/mp4">
    			</video>
    </div>
    			
      <script>        
     		
    		$(".thumb").click(function(){ 
    		 /*  $(".thumb").each(function() {  */
    	
    		$("#Preloader").find("source").first().attr("src",v1);
    		$("#Preloader").find("source").last().attr("src",v2);
    		
    		var video = document.getElementById('Preloader');
    		video.load();
    		video.play();
    		 })
     </script>
     
     </body>
    </html>
    Last edited by pratto; 05-01-2013 at 06:59 PM. Reason: added jsFiddle


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •