title: How to apply onEnded event for HTML video tag
body: <p>I have tried the video tag with flowplayer. The code is given below:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;
  &lt;/script&gt;
  
  &lt;!-- 2. flowplayer --&gt;
  &lt;script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- 3. skin --&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.4.0/skin/minimalist.css" /&gt;
  &lt;div class="player" data-engine="flash"  style="position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; " &gt;
  
  &lt;video preload="none" poster="images.jpeg" id="vid"&gt;
    &lt;source type="video/webm" src="file4.webm"/&gt;
    &lt;source type="video/mp4" src="file2.mp4"/&gt;
    &lt;source type="video/ogg" src="file2.ogv"/&gt;
  &lt;/video&gt;
  &lt;/div&gt;
  
   &lt;script&gt;
   // run script after document is ready
   $(function () {
  
  // install flowplayer to an element with CSS class "player"
    var player=  $(".player").flowplayer({
     swf: "flowplayer-5.4.0.swf"
         });
  
  
  
  });
  
  player.load(function() {
      alert("player was loaded programmatically");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I redirect the page to <a href="http://google.com" rel="nofollow">http://google.com</a> if the video is finished? How can I fire a ended event for detecting the video end?
  Thanks in advance!</p>
  
  <p>UPDATE </p>
  
  <pre><code>    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          // Master function, encapsulates all functions
          function init() {
              var video = document.getElementById("vid");
  
       video.onended = function(e) {
  
      alert('ok');
      // code to navigate page
      }
     }
      &lt;/script&gt;
  &lt;script&gt;
   $(function () {
  
     // install flowplayer to an element with CSS class "player"
    var player=  $(".player").flowplayer({
     swf: "flowplayer-5.4.0.swf"
         });
  
  
  
   });
  
    &lt;/script&gt;
  
  
    &lt;a class="player" data-engine="flash"  style="position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; " &gt;
  
   &lt;video preload="none" poster="images.jpeg" id="vid"&gt;
    &lt;source type="video/webm" src="file4.webm"/&gt;
    &lt;source type="video/mp4" src="file2.mp4"/&gt;
    &lt;source type="video/ogg" src="file2.ogv"/&gt;
   &lt;/video&gt;
  &lt;/a&gt;
  </code></pre>