Trying to detect the proper load event for video source object (thorough question with demonstrated attempts)

Trying to detect the proper load event for video source object (thorough question with demonstrated attempts)

Starting on line 12 (relative to this code segment) I am setting a global variable to keep count of how many source objects of k8r_modalVideo are ready to be played.
Below line 12 I am attempting to set up an even protocol, "When the source object of k8r_modalVideo are 'ready' then add 1 to the counter".
I have used .ready() as seen here  http://k8r.us/test4/beta/1/
and I have used .load() as seen here  http://k8r.us/test4/beta/2/

I have also tried using .ready() on the video object itself here  http://k8r.us/test4/beta/3/
you guessed it. I have tried doing .load() on the video object as well here  http://k8r.us/test4/beta/4/

For beta 3. The videos do eventually show, but the load spinner doesn't play through. you'll notice a pause blank screen and the video controls will be at the bottom of the modal box. This tells me that the video div is covering the load spinner.

Additional Notes:
the #k8r_modalVideo object is generated when a "video bringer"  is clicked.

  2. function loadNewContent(my){
  3. var ogv,mpx;
  4. ogv = my.attr("ogv");
  5. mp4 = my.attr("mpx");
  6. addModalVideo();
  7. addModalLoader();
  8. videoBox = $('#k8r_modalVideo');
  9. videoBox.prepend('<source src="'+ogv+'" type="video/ogg"/><source src="'+mp4+'" type="video/mp4"/>');
  10. videoBox.hide();
  12. window.videosLoaded = 0;
  14. $('#k8r_modalVideo').ready(function(){
  15. //alert();
  16. window.videosLoaded += 1;
  17. if (window.videosLoaded == 2){
  18. $('#k8r_modalLoader').hide();
  19. $('#k8r_modalVideo').show();
  20. }
  21. });
  22. }
Here is more code context:
[[ .php file of Index page ]] http://pastebin.com/sASatT2V

--- Keysle