在某个视频时间显示div并将其隐藏在另一个视频时间

Question

我试图在某个视频时间显示div并让它在2秒后消失，所以我尝试了这个但是它没有工作：

$(document).ready(function() {
 $("#element_1").hide(); 
 document.getElementById('bgvid').addEventListener("timeupdate", 
 function() {
 if(this.currentTime > 5) {
$("#element_1").show();
    }
    else if(this.currentTime > 7) {
        $("#element_1").hide();
    } 
});
});

它仅在视频开始后5秒显示div，但它不会将其隐藏在7。

Answer 1

我需要它才能正常工作：

$(document).ready(function() {
    $("#element_1").hide(); 
document.getElementById('bgvid').addEventListener("timeupdate", 
function() {
    if(this.currentTime > 5 && this.currentTime < 10) {
$("#element_1").show();
    }
    else {
        $("#element_1").hide();
    }
});
});

Answer 2

而不是去JQ你可以用普通的JS本身来实现它

https://codepen.io/subbu1191/pen/QvjKNQ

var vid = document.getElementById("myVideo");
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
  document.getElementById("demo").innerHTML = vid.currentTime;
     if((vid.currentTime >= 5) && (vid.currentTime <= 7)){
      document.getElementById('headerContent').style.display = 'block';
     }else{
      document.getElementById('headerContent').style.display = 'none';
     }
 }