How to apply onEnded event for HTML video tag

Question

I have tried the video tag with flowplayer. The code is given below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>

<!-- 2. flowplayer -->
<script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"></script>

<!-- 3. skin -->
<link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.4.0/skin/minimalist.css" />
<div class="player" data-engine="flash"  style="position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; " >

<video preload="none" poster="images.jpeg" id="vid">
  <source type="video/webm" src="file4.webm"/>
  <source type="video/mp4" src="file2.mp4"/>
  <source type="video/ogg" src="file2.ogv"/>
</video>
</div>

 <script>
 // 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");
});
</script>

How can I redirect the page to http://google.com if the video is finished? How can I fire a ended event for detecting the video end? Thanks in advance!

UPDATE

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

    <script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"></script>
    <script type="text/javascript">
        // Master function, encapsulates all functions
        function init() {
            var video = document.getElementById("vid");

     video.onended = function(e) {

    alert('ok');
    // code to navigate page
    }
   }
    </script>
<script>
 $(function () {

   // install flowplayer to an element with CSS class "player"
  var player=  $(".player").flowplayer({
   swf: "flowplayer-5.4.0.swf"
       });



 });

  </script>


  <a class="player" data-engine="flash"  style="position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; " >

 <video preload="none" poster="images.jpeg" id="vid">
  <source type="video/webm" src="file4.webm"/>
  <source type="video/mp4" src="file2.mp4"/>
  <source type="video/ogg" src="file2.ogv"/>
 </video>
</a>

Possible duplicate of [Detect when an HTML5 video finishes](https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes) — amin, Aug 12 '17 at 04:26

Dolo · Accepted Answer · 2013-04-19T06:27:13.453

1

// make a server call each time a clip starts or finishes
$f("#myPlayer").onStart(function(clip) {
    $.get("statistics.php?action=start&clip=" + clip.url);
}).onFinish(function(clip) {
    $.get("statistics.php?action=finish&clip=" + clip.url);
});

Check This for more info

Update

    <script type="text/javascript">
            // Master function, encapsulates all functions
            function init() {
                var video = document.getElementById("vid");   

    video.onended = function(e) {

        alert('ok');
        // code to navigate page
        } 
}
        <script>

edited Apr 19 '13 at 06:27

answered Apr 19 '13 at 05:04

Dolo

966
14
28

Thank you for you answer. I have changed my code as above. But it doesn't work though! – NewPHP Apr 19 '13 at 05:18
The above code which I used for playing videos in IOS. So I can't play the videos without that div. You mean I need to remove the div and add the class="player" to video tag, right? – NewPHP Apr 19 '13 at 05:50
Naa.. Its should be tag and you need to use http://flash.flowplayer.org/documentation/api/index.html javascript api for the technique I mentioned – Dolo Apr 19 '13 at 05:54
If you are using html5 tags then there may alternate choices wait I look into that – Dolo Apr 19 '13 at 05:56
Thanks for your help, I have been working 2 days with this problem! – NewPHP Apr 19 '13 at 05:57
I need to use Html5 for all ios devices, otherwise it won't display videos – NewPHP Apr 19 '13 at 06:00
I have edited the java script with player.load, but doesn't work – NewPHP Apr 19 '13 at 06:09
I have updated the code its confusing you mixing video tags and flow player.. Note the above code may not work in all browsers – Dolo Apr 19 '13 at 06:28
:( I have updated the code as above. but I didn't get an alert! – NewPHP Apr 19 '13 at 06:38
http://stackoverflow.com/questions/6218752/trigger-changepage-when-html5-video-ends-ios – Dolo Apr 19 '13 at 07:08

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Did you checked this answer? HTML 5 Video OnEnded Event not Firing

Also you can try checking the 'ended' property of video every few milliseconds http://www.w3schools.com/tags/av_prop_ended.asp

function checkIfEnded( )
{
  myVid=document.getElementById("video1");
  //alert(myVid.ended);
  if ( !myVid.ended )
  {
    setTimeout( "checkIfEnded( )", 1000);
  }
  else
  {
    //goto google.com
  }
}

edited May 23 '17 at 11:50

Community

1
1

answered Apr 19 '13 at 05:05

ripu1581

300
1
9

I have tried the code from w3schools. But I am always getting false. That is because I am using a div for flow player. How can I change it to working condition? – NewPHP Apr 19 '13 at 05:38
@NewPHP just checked here http://flowplayer.org/docs/api.html, Please check the 'finished' property of your player object periodically. – ripu1581 Apr 19 '13 at 05:51

How to apply onEnded event for HTML video tag

2 Answers2