CODEWITHSUNDEEP
jquery
Inzamam Tahir
Inzamam Tahir

Reputation: 537

I want to open dialog box when video ends

I need to know that how can I show a popup box when a "video ends". I know how to simply show a popuo on events like button clicks and others but how do I know that the video has ended and then display the popup box.

It will be best if the code is in jQuery/javascript

Upvotes: 1

Views: 871

Answers (3)

Xanco
Xanco

Reputation: 902

You could use something like bootbox.js to create your modal dialog and use the "onended" attribute in your video to call the dialog. Here's the code for it

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="bootbox.min.js"></script>
        <script>
            function videoHasFinished(){
                bootbox.alert("You have finished watching this video", function() {});
            }
        </script>
    </head>
    <body>
        <video width="320" height="240" controls onended="videoHasFinished()">
              <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
              <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

For more depth and explanation, I have created a Muddal: https://muddal.com/muddaltut.php?id=142

Upvotes: 0

baao
baao

Reputation: 73251

Hard to say exactly as you don't show any code, but you might want to give this a try:

setTimeout(function() {

var vid = document.getElementById("video");
var dialogbox = document.getElementById("dialogbox");
dialogbox.style.display = 'true'; }
, vid.duration * 1000);

In your css, set dialogbox to display:none

If you call this after video has started, it should be quite exact

Upvotes: 0

ashkufaraz
ashkufaraz

Reputation: 5297

try this

<html>
<head>
    <title></title>

    <script>
function videoEnded() {
    alert('video ended');
}


    </script>
</head>
<body>

<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
    video not supported
</video>
</body>
</html>

Upvotes: 1

Related Questions