0

I am trying to run a video in dialog box and have been 99% successful in performing all the operations on it that I wanted to. The last thing I want to do is to "Run a particular code when the video has ended". but that's the main problem here because I cannot get it done with the "onended" event that is available in html5. I have also tried using javascript to do that but with no success. Right now, in this question I want to show an alert box when the video has ended. Please have a look at my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>jQuery YouTube Popup Player Plugin</title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#myvideo").on("ended",function(){
                alert("Video has ended");
            });

            $("#player1").dialog({
                                    modal:true,
                                    width: 675,
                                    closeOnEscape: false,
                                    open: function(event, ui)   {
                                        $('video#myvideo').get(0).play();   
                                    },
                                    buttons: [
                                        {
                                            text: "Skip The Intro",
                                            click: function() {
                                                $( this ).dialog( "close" );
                                            }
                                        }
                                    ]
                                });
                            });


    </script>

    <style type="text/css">

        .ui-dialog-titlebar-close {
            display: none;
        }

    </style>

</head>
<body>

    <div id ="player1" title="My title">
        <video width="640" height="360" controls autoplay id="myvideo">
            <source type="video/mp4" src="deathNote.MP4" >
        </video>
    </div>

</body>
</html>

I'll be very thankful to you for your help.

Inzamam Tahir
  • 519
  • 4
  • 17
  • Have you tried some of these suggestions here? http://stackoverflow.com/questions/14517639/executing-function-at-end-of-html5-video Maybe that can help you ;) – Fabian Lurz Mar 29 '15 at 20:50
  • if you are talking about using .on (it's already in the code), .bind() and .live(), then ,yes I have already tried them out but that did not work for me. – Inzamam Tahir Mar 29 '15 at 20:52
  • Not sure about this - but your jQuery lib looks old - is this Version 1.10? I'm using >2.x -> If so try a newer one – Fabian Lurz Mar 29 '15 at 20:55
  • it's not the issue of the version. since, the code works if I don't use the dialog box. But I must use dialog box – Inzamam Tahir Mar 29 '15 at 20:57
  • Strange thing - here it says for on events it is version 1.7: https://api.jquery.com/on/ Any console errors? Or just not firing? – Fabian Lurz Mar 29 '15 at 20:59
  • I just tested the code in firefox and google chrome and it worked like a charm. no issues with the event in these browsers and I get the alert message in both of them. are you using a specific browser? or even maybe there is something wrong with your video file. have you tried it with another video file? – EhsanT Mar 30 '15 at 00:25

0 Answers0