CODEWITHSUNDEEP
javascript
dgk
dgk

Reputation: 17

button should appear 30 seconds from the end

<input style="display: none;" type="submit" id="btn3d" value="Proceed" class="btn btn-primary btn3d">

    </form>


<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $('#btn3d').delay(10000).show(0);   
</script>

how can i make the button display 30 seconds to the end of the video without hard coding it because length of videos i plan on uploading are not the same length.

Upvotes: 0

Views: 724

Answers (2)

Gopinath
Gopinath

Reputation: 4937

Running time / length of a video can be obtained by the 'duration' attribute of 'Video' element.

Here is an example of how a button can be shown 30 seconds before the video ends:

    var myVideo = document.getElementById("myVideo")

    // Find video duration when user clicks 'play'
    myVideo.onplay = function() {

        var duration = myVideo.duration
        var elapsedTime = myVideo.currentTime

        // Waiting time = (duration - elapsedTime - 30) seconds
        var waitingTime = (duration - elapsedTime - 30)*1000


        if (waitingTime <= 0) {
           // Minimum waiting time = 1 second
           waitingTime = 1000
        }

        // Show button after waiting time elapses
        setTimeout(
             function(){ 
                // Code to show button 
             }, 
             waitingTime
        )    
    }

More information:

https://www.w3schools.com/tags/av_event_play.asp

https://www.w3schools.com/tags/av_prop_duration.asp

https://www.w3schools.com/tags/av_prop_currenttime.asp

Upvotes: 0

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

You can use ended event of the video.

I don't know the structure of you HTML but you can do something like this:

<video id="myVideo">
   ...
</video>

<input id="btn3d" ...>

<script type="text/javascript">

  $(document).ready(function(){

    $(document).on("timeupdate","#myVideo",function() {

        const videoElem = $('#myVideo')[0];

        if(videoElem.duration - videoElem.currentTime <= 30) {
            $('#btn3d').show();
        }else{
            $('#btn3d').hide();
        }

    });

  })
</script>

Upvotes: 1

Related Questions