javascript - 我希望按钮在视频结束前 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

你似乎有太多 (( 在 if

如果视频是静态的而不是动态插入的，您可以更改

$(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>