Javascript 在某个视频时间显示div并在另一个视频时间隐藏它

我试图在某个视频时间显示一个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秒时不会隐藏它。

我已使其工作，是否需要它：

$(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();
    }
});
});

$（文档）.ready（函数（）{
$（“#元素_1”）.hide（）；
document.getElementById（'bgvid'）.addEventListener（“时间更新”），
函数（）{
如果（this.currentTime>5&&this.currentTime<10）{
$（“#元素_1”）.show（）；
}
否则{
$（“#元素_1”）.hide（）；
}
});
});

不用去JQ，你可以用纯JS来实现它

var vid=document.getElementById（“myVideo”）；
vid.ontimeupdate=function（）{myFunction（）}；
函数myFunction（）{
document.getElementById（“demo”）.innerHTML=vid.currentTime；
if（（vid.currentTime>=5）和&（vid.currentTime）为什么不使用
delay
？比如：
if（this.currentTime>5）{$（“#element_1”）.show（）.delay（2000）.fadeOut（）}
？事实上，它会以这种方式消失，但因为从那时起，时间也大于5，它会再次出现。请参阅
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';
     }
 }