Databases
StackOverflow2013
Postsdbo
POHow to apply onEnded event for HTML video tag
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to apply onEnded event for HTML video tag
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload