JQuery Video Trigger Problem

JQuery Video Trigger Problem

Hello All you Smiling Faces (and computer nerds in dark closets),

This is my first post on the forum as I am very new to JQuery. 

I'm attempting to use it to trigger a video to play and after it finishes, remove the video and direct a user to a specific website. 

The code more-or-less works but the duration of the video is random, sometimes it plays all the way, others it goes directly to the website, or sometimes the video starts playing without clicking a flag. 

If someone could help me out, that would be totally excellent.

Please mind that I have no knowledge of Jquery so I'm sure there are many better ways to do this so any suggestions would be appreciated.


Here's the code:

  2. <!doctype php>
  3. <php>

  5. <head>
  6.   <meta charset="utf-8">
  7.   <title>Porta Batumi Tower</title>
  8. <link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
  9. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  10. <link rel="stylesheet" href="../widescreen-child/style.css" type="text/css" />

  12. <script type="text/javascript">
  13.     
  14.    $(function(){
  15.        $(document).delegate('#play','click',function(){
  16.           $('#zoom')[0].play(); 
  17.            $("body").delay(6000).fadeOut(1000);
  18.             window.location = "/home-georgian/";
  19.        });
  20.    });
  21.    
  22.       $(function(){
  23.        $(document).delegate('#play2','click',function(){
  24.           $('#zoom')[0].play(); 
  25.            $("body").delay(6000).fadeOut(1000);
  26.             window.location = "/home/";
  27.        });
  28.    });
  29.      
  30.       $(function(){
  31.        $(document).delegate('#play3','click',function(){
  32.           $('#zoom')[0].play(); 
  33.            $("body").delay(6000).fadeOut(1000);
  34.             window.location = "/home-russian/";
  35.        });
  36.    });
  37.     
  38. </script>

  40. </head>

  42. <body style="background-color:white !important;">

  44. <div id="language_portal">

  46. <div id="logo">
  47. <img src="images/portabatumi_logo.jpg">
  48. </div>

  50. <h1>THE JEWEL OF <br/>
  51. NEW BATUMI</h1>
  52. <a href="javascript:void(0)" id="play" ><img src="images/flag_georgian.gif"></a>
  53. <a href="javascript:void(0)" id="play2" ><img src="images/flag_american.gif"></a>
  54. <a href="javascript:void(0)" id="play3" ><img src="images/flag_russia.gif"></a>
  55. </div>

  57. <div class="embed-container">
  58. <video  id="zoom" preload src="http://www.portabatumitower.com/wp-content/themes/widescreen/images/portabatumi_zoom3.mp4" ></video>
  59. </div>

  61. </body>
  62. </php>

Thanks and hare krishna,
Ross