я хотел бы, чтобы кнопка отображалась за 30 секунд до конца видео независимо от длины

Question

Код ниже, похоже, не работает. Кнопка не отображается вообще. Я пытался использовать задержку, но она не работает, как мне бы хотелось

$(document)
            .ready(
                function() {
                    $(document).on("timeupdate", "#video3", function() {
                        var videoElem = $("#video3")[0];
                        console.log(videoElem.duration);
                        if (((parseInt(videoElem.duration - videoElem.currentTime)) <= 30)){
                            $('.btn3d.').show();
                        } else {
                            $('.btn3d.').hide();
                        }
                    });
                }
            );

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <form method="post" action="<?php echo base_url();?>Students/introduction" style="float: left;">
      <video id="video3" width="640" height="360" controls>
        <source src="/elearning/assets/videos/video3.mp4" type="video/mp4">
        </video> <br>
      <input style="display: none;" type="submit" id="btn3d" value="Proceed" class="btn btn-primary btn3d">
    </form>

Answer 1

Похоже, у вас их слишком много ((в случае, если

Если видео устано c и не вставлено динамически, вы можете изменить

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

на

$("#video3").on("timeupdate", function() {

В любом случае попробуйте этот переключатель

$(function() {
  $(document).on("timeupdate", "#video3", function() {
    var videoElem = this;
    console.log(videoElem.duration);
    $('#btn3d').toggle(parseInt(videoElem.duration - videoElem.currentTime) <= 30);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="<?php echo base_url();?>Students/introduction" style="float: left;">
  <video id="video3" width="640" height="360" controls>
    <source src="/elearning/assets/videos/video3.mp4" type="video/mp4">
    </video> <br>
  <input style="display: none;" type="submit" id="btn3d" value="Proceed" class="btn btn-primary btn3d">
</form>